dashboard update added
This commit was merged in pull request #47.
This commit is contained in:
victorAnumudu
@@ -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>
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import { DashDataProps } from "../../../../../app/pages/dashboard/model"
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
description: string
|
||||
color: string
|
||||
img: string
|
||||
dashData?: DashDataProps
|
||||
}
|
||||
|
||||
const CardsWidget20 = ({className, description, color, img}: Props) => (
|
||||
const CardsWidget20 = ({className, description, color, img, dashData}: Props) => (
|
||||
<div
|
||||
className={`card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end ${className}`}
|
||||
style={{
|
||||
@@ -15,7 +18,7 @@ const CardsWidget20 = ({className, description, color, img}: Props) => (
|
||||
>
|
||||
<div className='card-header pt-5'>
|
||||
<div className='card-title d-flex flex-column'>
|
||||
<span className='fs-2hx fw-bold text-white me-2 lh-1 ls-n2'>69</span>
|
||||
<span className='fs-2hx fw-bold text-white me-2 lh-1 ls-n2'> {dashData?.loading ? 'Loading...': dashData?.data?.dash_data?.active_loans}</span>
|
||||
|
||||
<span className='text-white opacity-75 pt-1 fw-semibold fs-6'>{description}</span>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
|
||||
import clsx from 'clsx'
|
||||
import {toAbsoluteUrl} from '../../../../helpers'
|
||||
import { DashDataProps } from '../../../../../app/pages/dashboard/model'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
@@ -9,6 +10,7 @@ type Props = {
|
||||
stats: number
|
||||
labelColor: string
|
||||
textColor: string
|
||||
dashData?: DashDataProps
|
||||
}
|
||||
|
||||
const items: Array<{
|
||||
@@ -25,18 +27,18 @@ const items: Array<{
|
||||
{name: 'Barry Walter', src: toAbsoluteUrl('media/avatars/300-12.jpg')},
|
||||
]
|
||||
|
||||
const CardsWidget7 = ({className, description, stats, labelColor, textColor}: Props) => (
|
||||
const CardsWidget7 = ({className, description, stats, labelColor, textColor, dashData}: Props) => (
|
||||
<div className={`card card-flush ${className}`}>
|
||||
<div className='card-header pt-5'>
|
||||
<div className='card-title d-flex flex-column'>
|
||||
<div className='card-title d-flex flex-column'>
|
||||
<span className='fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2'>{stats}</span>
|
||||
<span className='fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2'>{dashData?.loading ? 'Loading...': dashData?.data?.dash_data?.applications}</span>
|
||||
<span className='text-gray-500 pt-1 fw-semibold fs-6'>{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card-body d-flex flex-column justify-content-end pe-0'>
|
||||
<span className='fs-6 fw-bolder text-gray-800 d-block mb-2'>Today’s Heroes</span>
|
||||
<span className='fs-6 fw-bolder text-gray-800 d-block mb-2'>Recent Applications</span>
|
||||
<div className='symbol-group symbol-hover flex-nowrap'>
|
||||
{items.map((item, index) => (
|
||||
<div
|
||||
|
||||
@@ -18,7 +18,7 @@ const EngageWidget10 = ({className}: Props) => (
|
||||
<div className='mb-10'>
|
||||
<div className='fs-2hx fw-bold text-gray-800 text-center mb-13'>
|
||||
<span className='me-2'>
|
||||
Try our all new Enviroment with
|
||||
Need more help to manage to the platform
|
||||
<br />
|
||||
<span className='position-relative d-inline-block text-danger'>
|
||||
<Link
|
||||
@@ -26,18 +26,18 @@ const EngageWidget10 = ({className}: Props) => (
|
||||
className='text-danger
|
||||
opacity-75-hover'
|
||||
>
|
||||
Pro Plan
|
||||
Use our help
|
||||
</Link>
|
||||
|
||||
<span className='position-absolute opacity-15 bottom-0 start-0 border-4 border-danger border-bottom w-100'></span>
|
||||
</span>
|
||||
</span>
|
||||
for Free
|
||||
{/* for Free */}
|
||||
</div>
|
||||
|
||||
<div className='text-center'>
|
||||
{/* <div className='text-center'>
|
||||
<a href='#'>Upgrade Now</a>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<img
|
||||
className='mx-auto h-150px h-lg-200px theme-light-show'
|
||||
|
||||
@@ -1,30 +1,31 @@
|
||||
|
||||
import {Fragment} from 'react'
|
||||
import {KTIcon} from '../../../../helpers'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const rows: Array<{description: string}> = [
|
||||
{description: 'Avg. Client Rating'},
|
||||
{description: 'Instagram Followers'},
|
||||
{description: 'Google Ads CPC'},
|
||||
const rows: Array<{description: string, link: string}> = [
|
||||
{description: 'Verified Loans', link: '/loan/pages/process/verified'},
|
||||
{description: 'Approved Loans', link: '/loan/pages/process/approved'},
|
||||
{description: 'Rejected Loans', link: '/loan/pages/process/rejected'},
|
||||
]
|
||||
|
||||
const ListsWidget26 = ({className}: Props) => (
|
||||
<div className={`card card-flush ${className}`}>
|
||||
<div className='card-header pt-5'>
|
||||
<h3 className='card-title text-gray-800 fw-bold'>External Links</h3>
|
||||
<h3 className='card-title text-gray-800 fw-bold'>Other Links</h3>
|
||||
<div className='card-toolbar'></div>
|
||||
</div>
|
||||
<div className='card-body pt-5'>
|
||||
{rows.map((row, index) => (
|
||||
<Fragment key={`lw26-rows-${index}`}>
|
||||
<div className='d-flex flex-stack'>
|
||||
<a href='#' className='text-primary fw-semibold fs-6 me-2'>
|
||||
<Link to={row.link} className='text-primary fw-semibold fs-6 me-2'>
|
||||
{row.description}
|
||||
</a>
|
||||
</Link>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-icon btn-sm h-auto btn-color-gray-500 btn-active-color-primary justify-content-end'
|
||||
|
||||
Reference in New Issue
Block a user