Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
e4d161c0a9 | ||
 ameye
|
f3b09a0ea2 | ||
|
victorAnumudu
|
321122258a | ||
|
victorAnumudu
|
fc9925a837 | ||
|
victorAnumudu
|
239b912585 | ||
 tokslaw
|
db2fe102f8 | ||
|
victorAnumudu
|
d1524b84d3 | ||
|
ameye
|
669ba34a8b | ||
|
victorAnumudu
|
e0e227ec02 | ||
|
ameye
|
7325d8eeb1 |
@@ -6,7 +6,7 @@ TWITTER_URL=https://twitter.com
|
|||||||
INSTAGRAM_URL=https://www.instagram.com
|
INSTAGRAM_URL=https://www.instagram.com
|
||||||
|
|
||||||
# BACKEND END POINTS
|
# BACKEND END POINTS
|
||||||
REACT_APP_MAIN_API='http://backoffice-apidev.simbrellang.net:14700'
|
REACT_APP_MAIN_API='https://backoffice-apidev.simbrellang.net'
|
||||||
|
|
||||||
# ENQUIRIES CONTACTS
|
# ENQUIRIES CONTACTS
|
||||||
VITE_CALL_ENDPOINT='09099000000'
|
VITE_CALL_ENDPOINT='09099000000'
|
||||||
|
|||||||
+1
-1
@@ -6,7 +6,7 @@ VITE_TWITTER_URL=https://twitter.com
|
|||||||
VITE_INSTAGRAM_URL=https://www.instagram.com
|
VITE_INSTAGRAM_URL=https://www.instagram.com
|
||||||
|
|
||||||
# BACKEND END POINTS
|
# BACKEND END POINTS
|
||||||
REACT_APP_MAIN_API='http://backoffice-apidev.simbrellang.net:14700'
|
REACT_APP_MAIN_API='https://backoffice-apidev.simbrellang.net'
|
||||||
|
|
||||||
# ENQUIRIES CONTACTS
|
# ENQUIRIES CONTACTS
|
||||||
VITE_CALL_ENDPOINT='09099000000'
|
VITE_CALL_ENDPOINT='09099000000'
|
||||||
|
|||||||
+1
-1
@@ -6,7 +6,7 @@ TWITTER_URL=https://twitter.com
|
|||||||
INSTAGRAM_URL=https://www.instagram.com
|
INSTAGRAM_URL=https://www.instagram.com
|
||||||
|
|
||||||
# BACKEND END POINTS
|
# BACKEND END POINTS
|
||||||
REACT_APP_MAIN_API='http://backoffice-apidev.simbrellang.net:14700'
|
REACT_APP_MAIN_API='https://backoffice-apidev.simbrellang.net'
|
||||||
|
|
||||||
# ENQUIRIES CONTACTS
|
# ENQUIRIES CONTACTS
|
||||||
VITE_CALL_ENDPOINT='09099000000'
|
VITE_CALL_ENDPOINT='09099000000'
|
||||||
|
|||||||
+2
-1
@@ -23,8 +23,9 @@ function App() {
|
|||||||
queries: {
|
queries: {
|
||||||
refetchOnWindowFocus: false,
|
refetchOnWindowFocus: false,
|
||||||
retry: 3,
|
retry: 3,
|
||||||
|
staleTime: 300000 //5 mins
|
||||||
// refetchOnMount: false,
|
// refetchOnMount: false,
|
||||||
staleTime: Infinity // can also be a number in millisecond
|
// staleTime: Infinity // can also be a number in millisecond
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -29,11 +29,12 @@
|
|||||||
// export default CustomCounter;
|
// export default CustomCounter;
|
||||||
|
|
||||||
|
|
||||||
import React from 'react';
|
// import React from 'react';
|
||||||
import CountUp from 'react-countup';
|
// import CountUp from 'react-countup';
|
||||||
|
|
||||||
const CustomCounter = ({ targetNumber, timeInSeconds }) => {
|
const CustomCounter = ({ targetNumber, timeInSeconds }) => {
|
||||||
return <CountUp end={targetNumber} duration={timeInSeconds} />;
|
// return <CountUp end={targetNumber} duration={timeInSeconds} />;
|
||||||
|
return targetNumber
|
||||||
};
|
};
|
||||||
|
|
||||||
export default CustomCounter;
|
export default CustomCounter;
|
||||||
@@ -5,8 +5,6 @@ import CustomCounter from '../../components/CustomCounter'
|
|||||||
import Icons from '../../components/Icons'
|
import Icons from '../../components/Icons'
|
||||||
import TableWrapper from '../../components/tableWrapper/TableWrapper'
|
import TableWrapper from '../../components/tableWrapper/TableWrapper'
|
||||||
import Avatar from '../../assets/user_avatar.jpg'
|
import Avatar from '../../assets/user_avatar.jpg'
|
||||||
import { Widget1 } from './Widget1'
|
|
||||||
import { Widget2 } from './Widget2'
|
|
||||||
import formatNumber from '../../helpers/formatNumber'
|
import formatNumber from '../../helpers/formatNumber'
|
||||||
|
|
||||||
import queryKeys from '../../services/queryKeys'
|
import queryKeys from '../../services/queryKeys'
|
||||||
@@ -16,7 +14,7 @@ export default function HomeCom() {
|
|||||||
|
|
||||||
const {data, isFetching, isError, error} = useQuery({
|
const {data, isFetching, isError, error} = useQuery({
|
||||||
queryKey: queryKeys.dashboard,
|
queryKey: queryKeys.dashboard,
|
||||||
queryFn: () => getDashData()
|
queryFn: () => getDashData(),
|
||||||
})
|
})
|
||||||
|
|
||||||
const dashData = data?.data // DASHBOARD DATA
|
const dashData = data?.data // DASHBOARD DATA
|
||||||
@@ -37,18 +35,16 @@ export default function HomeCom() {
|
|||||||
<div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
|
<div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
|
||||||
<div className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
|
<div className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
|
||||||
<p className='text-base sm:text-lg font-bold hover:text-primary'>Loans</p>
|
<p className='text-base sm:text-lg font-bold hover:text-primary'>Loans</p>
|
||||||
<Widget1 />
|
<div className='flex flex-wrap gap-2 items-end font-bold'>
|
||||||
<div className='flex gap-2 items-end font-bold'>
|
|
||||||
{/* <p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>{dashData?.loans?.currency_text}</span><CustomCounter targetNumber={formatNumber(dashData?.loans?.value)} timeInSeconds='1' /></p> */}
|
{/* <p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>{dashData?.loans?.currency_text}</span><CustomCounter targetNumber={formatNumber(dashData?.loans?.value)} timeInSeconds='1' /></p> */}
|
||||||
<p className='text-base sm:text-lg'><span className='text-sm'>{dashData?.loans?.currency_text}</span><CustomCounter targetNumber={formatNumber(dashData?.loans?.value)} timeInSeconds='1' /></p>
|
<p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>{dashData?.loans?.currency_text}</span><CustomCounter targetNumber={formatNumber(dashData?.loans?.value)} timeInSeconds='1' /></p>
|
||||||
<p className='sm:text-[13.9px]'>{dashData?.loans?.text}</p>
|
<p className='sm:text-[13.9px]'>{dashData?.loans?.text}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
|
<div className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
|
||||||
<p className='text-base sm:text-lg font-bold hover:text-primary'>Payments</p>
|
<p className='text-base sm:text-lg font-bold hover:text-primary'>Payments</p>
|
||||||
{/* <Widget2 /> */}
|
<div className='flex flex-wrap gap-2 items-end font-bold'>
|
||||||
<div className='flex gap-2 items-end font-bold'>
|
<p className='text-xl sm:text-[30px]'><span className='text-lg sm:text-xl'>{dashData?.payments?.currency_text}</span><CustomCounter targetNumber={formatNumber(dashData?.payments?.value)} timeInSeconds='1' /></p>
|
||||||
<p className='text-sm sm:text-base'><span className='text-sm'>{dashData?.payments?.currency_text}</span><CustomCounter targetNumber={formatNumber(dashData?.payments?.value)} timeInSeconds='1' /></p>
|
|
||||||
<p className='sm:text-[13.9px]'>{dashData?.payments?.text}</p>
|
<p className='sm:text-[13.9px]'>{dashData?.payments?.text}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+176
-176
@@ -1,187 +1,187 @@
|
|||||||
import {useEffect, useRef} from 'react'
|
// import {useEffect, useRef} from 'react'
|
||||||
import ApexCharts from 'apexcharts'
|
// import ApexCharts from 'apexcharts'
|
||||||
|
|
||||||
const Widget1 = ({chartHeight='50px'}) => {
|
// const Widget1 = ({chartHeight='50px'}) => {
|
||||||
const chartRef = useRef(null)
|
// const chartRef = useRef(null)
|
||||||
|
|
||||||
const {mode} = '' // to be replaced by theme mode value later
|
// const {mode} = '' // to be replaced by theme mode value later
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
const chart = refreshChart()
|
// const chart = refreshChart()
|
||||||
|
|
||||||
return () => {
|
// return () => {
|
||||||
if (chart) {
|
// if (chart) {
|
||||||
chart.destroy()
|
// chart.destroy()
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [chartRef, mode])
|
// }, [chartRef, mode])
|
||||||
|
|
||||||
const refreshChart = () => {
|
// const refreshChart = () => {
|
||||||
if (!chartRef.current) {
|
// if (!chartRef.current) {
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
|
||||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
|
// const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
|
||||||
if (chart) {
|
// if (chart) {
|
||||||
chart.render()
|
// chart.render()
|
||||||
}
|
// }
|
||||||
|
|
||||||
return chart
|
// return chart
|
||||||
}
|
// }
|
||||||
|
|
||||||
return (
|
// return (
|
||||||
<div className='w-full'>
|
// <div className='w-full'>
|
||||||
{/* end::Title */}
|
// {/* end::Title */}
|
||||||
<div
|
// <div
|
||||||
ref={chartRef}
|
// ref={chartRef}
|
||||||
className='mixed-widget-13-chart'
|
// className='mixed-widget-13-chart'
|
||||||
style={{height: chartHeight, minHeight: chartHeight}}
|
// style={{height: chartHeight, minHeight: chartHeight}}
|
||||||
></div>
|
// ></div>
|
||||||
</div>
|
// </div>
|
||||||
)
|
// )
|
||||||
}
|
// }
|
||||||
|
|
||||||
const chartOptions = (chartHeight) => {
|
// const chartOptions = (chartHeight) => {
|
||||||
// const labelColor = getCSSVariableValue('--bs-gray-800')
|
// // const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||||
// const strokeColor = getCSSVariableValue('--bs-gray-300')
|
// // const strokeColor = getCSSVariableValue('--bs-gray-300')
|
||||||
const labelColor = '#e9e9e9'
|
// const labelColor = '#e9e9e9'
|
||||||
const strokeColor = '#e3e3e3'
|
// const strokeColor = '#e3e3e3'
|
||||||
// const strokeColor = getCSSVariableValue('--bs-gray-300') as string
|
// // const strokeColor = getCSSVariableValue('--bs-gray-300') as string
|
||||||
|
|
||||||
return {
|
// return {
|
||||||
series: [
|
// series: [
|
||||||
{
|
// {
|
||||||
name: 'Loans',
|
// name: 'Loans',
|
||||||
data: [15, 25, 15, 40, 20, 50],
|
// data: [15, 25, 15, 40, 20, 50],
|
||||||
},
|
// },
|
||||||
],
|
// ],
|
||||||
grid: {
|
// grid: {
|
||||||
show: false,
|
// show: false,
|
||||||
padding: {
|
// padding: {
|
||||||
top: 0,
|
// top: 0,
|
||||||
bottom: 0,
|
// bottom: 0,
|
||||||
left: 0,
|
// left: 0,
|
||||||
right: 0,
|
// right: 0,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
chart: {
|
// chart: {
|
||||||
fontFamily: 'inherit',
|
// fontFamily: 'inherit',
|
||||||
type: 'area',
|
// type: 'area',
|
||||||
height: chartHeight,
|
// height: chartHeight,
|
||||||
toolbar: {
|
// toolbar: {
|
||||||
show: false,
|
// show: false,
|
||||||
},
|
// },
|
||||||
zoom: {
|
// zoom: {
|
||||||
enabled: false,
|
// enabled: false,
|
||||||
},
|
// },
|
||||||
sparkline: {
|
// sparkline: {
|
||||||
enabled: true,
|
// enabled: true,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
plotOptions: {},
|
// plotOptions: {},
|
||||||
legend: {
|
// legend: {
|
||||||
show: false,
|
// show: false,
|
||||||
},
|
// },
|
||||||
dataLabels: {
|
// dataLabels: {
|
||||||
enabled: false,
|
// enabled: false,
|
||||||
},
|
// },
|
||||||
fill: {
|
// fill: {
|
||||||
type: 'gradient',
|
// type: 'gradient',
|
||||||
gradient: {
|
// gradient: {
|
||||||
opacityFrom: 0.4,
|
// opacityFrom: 0.4,
|
||||||
opacityTo: 0,
|
// opacityTo: 0,
|
||||||
stops: [20, 120, 120, 120],
|
// stops: [20, 120, 120, 120],
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
stroke: {
|
// stroke: {
|
||||||
curve: 'smooth',
|
// curve: 'smooth',
|
||||||
show: true,
|
// show: true,
|
||||||
width: 3,
|
// width: 3,
|
||||||
colors: ['#FFFFFF'],
|
// colors: ['#FFFFFF'],
|
||||||
},
|
// },
|
||||||
xaxis: {
|
// xaxis: {
|
||||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
// categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||||
axisBorder: {
|
// axisBorder: {
|
||||||
show: false,
|
// show: false,
|
||||||
},
|
// },
|
||||||
axisTicks: {
|
// axisTicks: {
|
||||||
show: false,
|
// show: false,
|
||||||
},
|
// },
|
||||||
labels: {
|
// labels: {
|
||||||
show: false,
|
// show: false,
|
||||||
style: {
|
// style: {
|
||||||
colors: labelColor,
|
// colors: labelColor,
|
||||||
fontSize: '12px',
|
// fontSize: '12px',
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
crosshairs: {
|
// crosshairs: {
|
||||||
show: false,
|
// show: false,
|
||||||
position: 'front',
|
// position: 'front',
|
||||||
stroke: {
|
// stroke: {
|
||||||
color: strokeColor,
|
// color: strokeColor,
|
||||||
width: 1,
|
// width: 1,
|
||||||
dashArray: 3,
|
// dashArray: 3,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
enabled: true,
|
// enabled: true,
|
||||||
formatter: undefined,
|
// formatter: undefined,
|
||||||
offsetY: 0,
|
// offsetY: 0,
|
||||||
style: {
|
// style: {
|
||||||
fontSize: '12px',
|
// fontSize: '12px',
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
yaxis: {
|
// yaxis: {
|
||||||
min: 0,
|
// min: 0,
|
||||||
max: 60,
|
// max: 60,
|
||||||
labels: {
|
// labels: {
|
||||||
show: false,
|
// show: false,
|
||||||
style: {
|
// style: {
|
||||||
colors: labelColor,
|
// colors: labelColor,
|
||||||
fontSize: '12px',
|
// fontSize: '12px',
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
states: {
|
// states: {
|
||||||
normal: {
|
// normal: {
|
||||||
filter: {
|
// filter: {
|
||||||
type: 'none',
|
// type: 'none',
|
||||||
value: 0,
|
// value: 0,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
hover: {
|
// hover: {
|
||||||
filter: {
|
// filter: {
|
||||||
type: 'none',
|
// type: 'none',
|
||||||
value: 0,
|
// value: 0,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
active: {
|
// active: {
|
||||||
allowMultipleDataPointsSelection: false,
|
// allowMultipleDataPointsSelection: false,
|
||||||
filter: {
|
// filter: {
|
||||||
type: 'none',
|
// type: 'none',
|
||||||
value: 0,
|
// value: 0,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
style: {
|
// style: {
|
||||||
fontSize: '12px',
|
// fontSize: '12px',
|
||||||
},
|
// },
|
||||||
y: {
|
// y: {
|
||||||
formatter: function (val) {
|
// formatter: function (val) {
|
||||||
return '$' + val + ' thousand'
|
// return '$' + val + ' thousand'
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
colors: ['#ffffff'],
|
// colors: ['#ffffff'],
|
||||||
markers: {
|
// markers: {
|
||||||
colors: [labelColor],
|
// colors: [labelColor],
|
||||||
strokeColors: [strokeColor],
|
// strokeColors: [strokeColor],
|
||||||
strokeWidth: 3,
|
// strokeWidth: 3,
|
||||||
},
|
// },
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
export {Widget1}
|
// export {Widget1}
|
||||||
|
|||||||
+136
-136
@@ -1,147 +1,147 @@
|
|||||||
import {useEffect, useRef} from 'react'
|
// import {useEffect, useRef} from 'react'
|
||||||
import ApexCharts from 'apexcharts'
|
// import ApexCharts from 'apexcharts'
|
||||||
|
|
||||||
const Widget2 = ({chartHeight='100px'}) => {
|
// const Widget2 = ({chartHeight='100px'}) => {
|
||||||
const chartRef = useRef(null)
|
// const chartRef = useRef(null)
|
||||||
|
|
||||||
const {mode} = '' // to be replaced by theme mode value later
|
// const {mode} = '' // to be replaced by theme mode value later
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
const chart = refreshChart()
|
// const chart = refreshChart()
|
||||||
|
|
||||||
return () => {
|
// return () => {
|
||||||
if (chart) {
|
// if (chart) {
|
||||||
chart.destroy()
|
// chart.destroy()
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [chartRef, mode])
|
// }, [chartRef, mode])
|
||||||
|
|
||||||
const refreshChart = () => {
|
// const refreshChart = () => {
|
||||||
if (!chartRef.current) {
|
// if (!chartRef.current) {
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
|
||||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
|
// const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
|
||||||
if (chart) {
|
// if (chart) {
|
||||||
chart.render()
|
// chart.render()
|
||||||
}
|
// }
|
||||||
|
|
||||||
return chart
|
// return chart
|
||||||
}
|
// }
|
||||||
|
|
||||||
return (
|
// return (
|
||||||
<div className='w-full'>
|
// <div className='w-full'>
|
||||||
{/* end::Title */}
|
// {/* end::Title */}
|
||||||
<div
|
// <div
|
||||||
ref={chartRef}
|
// ref={chartRef}
|
||||||
className='mixed-widget-13-chart'
|
// className='mixed-widget-13-chart'
|
||||||
style={{height: chartHeight, minHeight: chartHeight}}
|
// style={{height: chartHeight, minHeight: chartHeight}}
|
||||||
></div>
|
// ></div>
|
||||||
</div>
|
// </div>
|
||||||
)
|
// )
|
||||||
}
|
// }
|
||||||
|
|
||||||
const chartOptions = (chartHeight) => {
|
// const chartOptions = (chartHeight) => {
|
||||||
// const labelColor = getCSSVariableValue('--bs-gray-800')
|
// // const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||||
|
|
||||||
return {
|
// return {
|
||||||
series: [
|
// series: [
|
||||||
{
|
// {
|
||||||
name: 'Payments',
|
// name: 'Payments',
|
||||||
data: [1, 2.1, 1, 2.1, 4.1, 6.1, 4.1, 4.1, 2.1, 4.1, 2.1, 3.1, 1, 1, 2.1],
|
// data: [1, 2.1, 1, 2.1, 4.1, 6.1, 4.1, 4.1, 2.1, 4.1, 2.1, 3.1, 1, 1, 2.1],
|
||||||
},
|
// },
|
||||||
],
|
// ],
|
||||||
chart: {
|
// chart: {
|
||||||
fontFamily: 'inherit',
|
// fontFamily: 'inherit',
|
||||||
height: chartHeight,
|
// height: chartHeight,
|
||||||
type: 'bar',
|
// type: 'bar',
|
||||||
toolbar: {
|
// toolbar: {
|
||||||
show: false,
|
// show: false,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
grid: {
|
// grid: {
|
||||||
show: false,
|
// show: false,
|
||||||
padding: {
|
// padding: {
|
||||||
top: 0,
|
// top: 0,
|
||||||
bottom: 0,
|
// bottom: 0,
|
||||||
left: 0,
|
// left: 0,
|
||||||
right: 0,
|
// right: 0,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
colors: ['#ffffff'],
|
// colors: ['#ffffff'],
|
||||||
plotOptions: {
|
// plotOptions: {
|
||||||
bar: {
|
// bar: {
|
||||||
borderRadius: 2.5,
|
// borderRadius: 2.5,
|
||||||
dataLabels: {
|
// dataLabels: {
|
||||||
position: 'top', // top, center, bottom
|
// position: 'top', // top, center, bottom
|
||||||
},
|
// },
|
||||||
columnWidth: '20%',
|
// columnWidth: '20%',
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
dataLabels: {
|
// dataLabels: {
|
||||||
enabled: false,
|
// enabled: false,
|
||||||
formatter: function (val) {
|
// formatter: function (val) {
|
||||||
return val + '%'
|
// return val + '%'
|
||||||
},
|
// },
|
||||||
offsetY: -20,
|
// offsetY: -20,
|
||||||
style: {
|
// style: {
|
||||||
fontSize: '12px',
|
// fontSize: '12px',
|
||||||
colors: ['#304758'],
|
// colors: ['#304758'],
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
xaxis: {
|
// xaxis: {
|
||||||
labels: {
|
// labels: {
|
||||||
show: false,
|
// show: false,
|
||||||
},
|
// },
|
||||||
categories: [
|
// categories: [
|
||||||
'Jan',
|
// 'Jan',
|
||||||
'Feb',
|
// 'Feb',
|
||||||
'Mar',
|
// 'Mar',
|
||||||
'Apr',
|
// 'Apr',
|
||||||
'May',
|
// 'May',
|
||||||
'Jun',
|
// 'Jun',
|
||||||
'Jul',
|
// 'Jul',
|
||||||
'Aug',
|
// 'Aug',
|
||||||
'Sep',
|
// 'Sep',
|
||||||
'Oct',
|
// 'Oct',
|
||||||
'Nov',
|
// 'Nov',
|
||||||
'Dec',
|
// 'Dec',
|
||||||
'Jan',
|
// 'Jan',
|
||||||
'Feb',
|
// 'Feb',
|
||||||
'Mar',
|
// 'Mar',
|
||||||
],
|
// ],
|
||||||
position: 'top',
|
// position: 'top',
|
||||||
axisBorder: {
|
// axisBorder: {
|
||||||
show: false,
|
// show: false,
|
||||||
},
|
// },
|
||||||
axisTicks: {
|
// axisTicks: {
|
||||||
show: false,
|
// show: false,
|
||||||
},
|
// },
|
||||||
crosshairs: {
|
// crosshairs: {
|
||||||
show: false,
|
// show: false,
|
||||||
},
|
// },
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
enabled: false,
|
// enabled: false,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
yaxis: {
|
// yaxis: {
|
||||||
show: false,
|
// show: false,
|
||||||
axisBorder: {
|
// axisBorder: {
|
||||||
show: false,
|
// show: false,
|
||||||
},
|
// },
|
||||||
axisTicks: {
|
// axisTicks: {
|
||||||
show: false,
|
// show: false,
|
||||||
// background: labelColor,
|
// // background: labelColor,
|
||||||
},
|
// },
|
||||||
labels: {
|
// labels: {
|
||||||
show: false,
|
// show: false,
|
||||||
formatter: function (val) {
|
// formatter: function (val) {
|
||||||
return val + '%'
|
// return val + '%'
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
export {Widget2}
|
// export {Widget2}
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export default function DashboardAside() {
|
|||||||
let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
|
let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
|
||||||
if(active && !hasSubLinks){
|
if(active && !hasSubLinks){
|
||||||
return (
|
return (
|
||||||
<div key={index}>
|
<div key={link.name}>
|
||||||
<AsideLink to={link.to} name={link.name} icon={link.icon} />
|
<AsideLink to={link.to} name={link.name} icon={link.icon} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@@ -49,7 +49,7 @@ export default function DashboardAside() {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
return (
|
return (
|
||||||
<div key={index} className="w-full">
|
<div key={link.name} className="w-full">
|
||||||
{link.title &&
|
{link.title &&
|
||||||
<h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-500 dark:border-white">{link.title}</h1>
|
<h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-500 dark:border-white">{link.title}</h1>
|
||||||
}
|
}
|
||||||
@@ -60,8 +60,8 @@ export default function DashboardAside() {
|
|||||||
let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
|
let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
|
||||||
if(active && !hasSubLinks){
|
if(active && !hasSubLinks){
|
||||||
return (
|
return (
|
||||||
<div key={index}>
|
<div key={subItem.name}>
|
||||||
<AsideLink key={index} to={subItem.to} name={subItem.name} icon={subItem.icon} />
|
<AsideLink to={subItem.to} name={subItem.name} icon={subItem.icon} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}else if(active && hasSubLinks){
|
}else if(active && hasSubLinks){
|
||||||
@@ -71,7 +71,7 @@ export default function DashboardAside() {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
return(
|
return(
|
||||||
<AsideLinkWithSubLinks name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
|
<AsideLinkWithSubLinks key={subItem.name} name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
|
||||||
<>
|
<>
|
||||||
{subItem.subLinks.map((item, index)=>{
|
{subItem.subLinks.map((item, index)=>{
|
||||||
let active = item.status == 1 ? true : false
|
let active = item.status == 1 ? true : false
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import {Link} from 'react-router-dom'
|
|
||||||
|
|
||||||
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
|
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
|
||||||
import TableWrapper from '../tableWrapper/TableWrapper'
|
import TableWrapper from '../tableWrapper/TableWrapper'
|
||||||
@@ -8,18 +7,21 @@ import Icons from '../Icons'
|
|||||||
|
|
||||||
import Avatar from '../../assets/user_avatar.jpg'
|
import Avatar from '../../assets/user_avatar.jpg'
|
||||||
import queryKeys from '../../services/queryKeys'
|
import queryKeys from '../../services/queryKeys'
|
||||||
import { selectLoan } from '../../services/siteServices'
|
import { getLoans } from '../../services/siteServices'
|
||||||
import getDateFromDateString from '../../helpers/GetDateFromDateString';
|
import getDateFromDateString from '../../helpers/GetDateFromDateString';
|
||||||
|
import formatNumber from '../../helpers/formatNumber'
|
||||||
import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
|
import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
|
||||||
|
|
||||||
export default function LoansCom() {
|
export default function LoansCom() {
|
||||||
|
|
||||||
const {data, isFetching, isError, error} = useQuery({
|
const {data:allLoans, isFetching, isError, error} = useQuery({
|
||||||
queryKey: queryKeys.select_loan,
|
queryKey: queryKeys.loans,
|
||||||
queryFn: () => selectLoan()
|
queryFn: () => getLoans()
|
||||||
})
|
})
|
||||||
|
|
||||||
const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
|
const loans = allLoans?.data?.loans // LOANS LIST
|
||||||
|
const loansCount = allLoans?.data?.count // LOANS LIST COUNT
|
||||||
|
// console.log('LOANS', loans)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='w-full flex flex-col gap-8'>
|
<div className='w-full flex flex-col gap-8'>
|
||||||
@@ -33,19 +35,19 @@ export default function LoansCom() {
|
|||||||
: isError ?
|
: isError ?
|
||||||
<p className='text-red-500'>{error.message}</p>
|
<p className='text-red-500'>{error.message}</p>
|
||||||
:
|
:
|
||||||
<TableWrapper data={selectUsers} itemsPerPage={15}>
|
<TableWrapper data={loans} itemsPerPage={15}>
|
||||||
{({ data }) => (
|
{({ data }) => (
|
||||||
<>
|
<>
|
||||||
<table className="py-2 w-full text-sm">
|
<table className="table-auto py-2 w-full text-sm">
|
||||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" className="px-2 py-2">
|
<th scope="col" className="px-2 py-2">
|
||||||
Name
|
Name
|
||||||
</th>
|
</th>
|
||||||
<th scope="col" className="px-2">
|
<th scope="col" className="px-2 text-right">
|
||||||
Loan
|
Loan Amount
|
||||||
</th>
|
</th>
|
||||||
<th scope="col" className="px-2">
|
<th scope="col" className="px-2 text-right">
|
||||||
Added
|
Added
|
||||||
</th>
|
</th>
|
||||||
<th scope="col" className="px-2 text-right">
|
<th scope="col" className="px-2 text-right">
|
||||||
@@ -55,25 +57,25 @@ export default function LoansCom() {
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{(data && data.length > 0) ? data?.map((item, index) => (
|
{(data && data.length > 0) ? data?.map((item, index) => (
|
||||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
<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'>
|
||||||
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
|
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
<div className="text-base font-semibold">{item?.name || ''}</div>
|
<div className="text-base font-semibold">{item?.account_id || ''}</div>
|
||||||
<div className="font-normal text-gray-500">{item?.bvn}</div>
|
<div className="font-normal text-gray-500">{item?.customer_id}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-2">
|
<td className="px-2">
|
||||||
<div className="text-left">
|
<div className="text-right">
|
||||||
<div className="text-base font-semibold">{item?.loan}</div>
|
{/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
|
||||||
<div className="font-normal text-gray-500">{item?.description}</div>
|
<div className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-2">
|
<td className="px-2">
|
||||||
<div className="text-left">
|
<div className="text-right">
|
||||||
<div className="font-normal text-gray-500">{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}</div>
|
<div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-2 text-right">
|
<td className="px-2 text-right">
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { ReactNode, useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import MainBtn from "../MainBtn";
|
import MainBtn from "../MainBtn";
|
||||||
import Icons from "../Icons";
|
import Icons from "../Icons";
|
||||||
|
|
||||||
@@ -19,7 +19,7 @@ export default function TableWrapper({
|
|||||||
const numberOfSelection = itemsPerPage;
|
const numberOfSelection = itemsPerPage;
|
||||||
|
|
||||||
const handlePrev = () => {
|
const handlePrev = () => {
|
||||||
if (currentPage != 0) {
|
if (currentPage !== 0) {
|
||||||
setCurrentPage((prev) => prev - numberOfSelection);
|
setCurrentPage((prev) => prev - numberOfSelection);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -46,7 +46,7 @@ export default function TableWrapper({
|
|||||||
);
|
);
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
},1000)
|
},1000)
|
||||||
}, [currentPage, filteredData]);
|
}, [currentPage, filteredData, numberOfSelection]);
|
||||||
|
|
||||||
useEffect(()=>{
|
useEffect(()=>{
|
||||||
setCurrentPage(0)
|
setCurrentPage(0)
|
||||||
@@ -92,7 +92,7 @@ export default function TableWrapper({
|
|||||||
<MainBtn
|
<MainBtn
|
||||||
onClick={handlePrev}
|
onClick={handlePrev}
|
||||||
// text='Prev'
|
// text='Prev'
|
||||||
className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`}
|
className={`${currentPage === 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`}
|
||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
>
|
>
|
||||||
<Icons name='prev' />
|
<Icons name='prev' />
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
const formatNumber = (number = 0) => {
|
const formatNumber = (number = 0) => {
|
||||||
// return new Intl.NumberFormat().format(number);
|
return new Intl.NumberFormat().format(number);
|
||||||
return number.toFixed(2);
|
// return number.toFixed(2);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default formatNumber
|
export default formatNumber
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
const queryKeys = {
|
const queryKeys = {
|
||||||
dashboard: ['dashboard'],
|
dashboard: ['dashboard'],
|
||||||
|
loans: ['loans'],
|
||||||
apply_loan: ['apply'],
|
apply_loan: ['apply'],
|
||||||
select_loan: ['select-loan'],
|
select_loan: ['select-loan'],
|
||||||
approved_loan: ['approved-loan'],
|
approved_loan: ['approved-loan'],
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ axios.interceptors.request.use(
|
|||||||
"Access-Control-Allow-Origin": "*",
|
"Access-Control-Allow-Origin": "*",
|
||||||
// "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
|
// "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
|
||||||
// "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
|
// "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
|
||||||
"Content-Type": "application/json;charset=UTF-8",
|
// "Content-Type": "application/json;charset=UTF-8",
|
||||||
'Authorization': (localStorage && localStorage.getItem('token')) ? `Bearer ${localStorage.getItem('token')}` : ''
|
'Authorization': (localStorage && localStorage.getItem('token')) ? `Bearer ${localStorage.getItem('token')}` : ''
|
||||||
};
|
};
|
||||||
// config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
|
// config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
|
||||||
@@ -56,6 +56,15 @@ export const getDashData = (reqData) => {
|
|||||||
return getAuxEnd(`/dashboard`, postData)
|
return getAuxEnd(`/dashboard`, postData)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// FUNCTION TO GET APPLIED LOANS TABLE
|
||||||
|
export const getLoans = (reqData) => {
|
||||||
|
const postData = { ...reqData }
|
||||||
|
return getAuxEnd(`/loans`, postData)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// FUNCTION TO GET APPLIED LOANS TABLE
|
// FUNCTION TO GET APPLIED LOANS TABLE
|
||||||
export const applyLoan = (reqData) => {
|
export const applyLoan = (reqData) => {
|
||||||
const postData = { ...reqData }
|
const postData = { ...reqData }
|
||||||
|
|||||||
Reference in New Issue
Block a user