dashboard update added

This commit was merged in pull request #47.
This commit is contained in:
victorAnumudu
2024-09-03 21:57:40 +01:00
parent 00aa5e57fa
commit cffaa9f379
41 changed files with 1807 additions and 48 deletions
@@ -3,12 +3,15 @@ import {FC, useEffect, useRef} from 'react'
import {KTIcon} from '../../../../helpers'
import {getCSSVariableValue} from '../../../../assets/ts/_utils'
import {useThemeMode} from '../../../layout/theme-mode/ThemeModeProvider'
import { DashDataProps } from '../../../../../app/pages/dashboard/model'
import { FormatAmount } from '../../../../helpers/formatNumbers'
type Props = {
className: string
chartSize?: number
chartLine?: number
chartRotate?: number
dashData?: DashDataProps
}
const CardsWidget17: FC<Props> = ({
@@ -16,6 +19,7 @@ const CardsWidget17: FC<Props> = ({
chartSize = 70,
chartLine = 11,
chartRotate = 145,
dashData
}) => {
const chartRef = useRef<HTMLDivElement | null>(null)
const {mode} = useThemeMode()
@@ -39,15 +43,15 @@ const CardsWidget17: FC<Props> = ({
<div className='card-header pt-5'>
<div className='card-title d-flex flex-column'>
<div className='d-flex align-items-center'>
<span className='fs-4 fw-semibold text-gray-500 me-1 align-self-start'>$</span>
{/* <span className='fs-4 fw-semibold text-gray-500 me-1 align-self-start'>$</span> */}
<span className='fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2'>69,700</span>
<span className='fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2'>{FormatAmount('69,700')}</span>
<span className='badge badge-light-success fs-base'>
<KTIcon iconName='arrow-up' className='fs-5 text-success ms-n1' /> 2.2%
</span>
</div>
<span className='text-gray-500 pt-1 fw-semibold fs-6'>Projects Earnings in April</span>
<span className='text-gray-500 pt-1 fw-semibold fs-6'>Application in {dashData?.loading ? 'Loading...': dashData?.data?.dash_data?.curr_month}</span>
</div>
</div>
@@ -65,21 +69,21 @@ const CardsWidget17: FC<Props> = ({
<div className='d-flex flex-column content-justify-center flex-row-fluid'>
<div className='d-flex fw-semibold align-items-center'>
<div className='bullet w-8px h-3px rounded-2 bg-success me-3'></div>
<div className='text-gray-500 flex-grow-1 me-4'>Leaf CRM</div>
<div className='fw-bolder text-gray-700 text-xxl-end'>$7,660</div>
<div className='text-gray-500 flex-grow-1 me-4'>Ready</div>
<div className='fw-bolder text-gray-700 text-xxl-end'>{dashData?.loading ? 'Loading...': FormatAmount(dashData?.data?.dash_data?.ready_loans)}</div>
</div>
<div className='d-flex fw-semibold align-items-center my-3'>
<div className='bullet w-8px h-3px rounded-2 bg-primary me-3'></div>
<div className='text-gray-500 flex-grow-1 me-4'>Mivy App</div>
<div className='fw-bolder text-gray-700 text-xxl-end'>$2,820</div>
<div className='text-gray-500 flex-grow-1 me-4'>Verified</div>
<div className='fw-bolder text-gray-700 text-xxl-end'>{dashData?.loading ? 'Loading...': FormatAmount(dashData?.data?.dash_data?.verified_loans)}</div>
</div>
<div className='d-flex fw-semibold align-items-center'>
<div
className='bullet w-8px h-3px rounded-2 me-3'
style={{backgroundColor: '#E4E6EF'}}
></div>
<div className='text-gray-500 flex-grow-1 me-4'>Others</div>
<div className=' fw-bolder text-gray-700 text-xxl-end'>$45,257</div>
<div className='text-gray-500 flex-grow-1 me-4'>Approved</div>
<div className=' fw-bolder text-gray-700 text-xxl-end'>{dashData?.loading ? 'Loading...': FormatAmount(dashData?.data?.dash_data?.approved_loans)}</div>
</div>
</div>
</div>