63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
|
|
import React from 'react'
|
|
import styles from './dashboard.module.css'
|
|
import Bank from './Bank'
|
|
import Graph from './Graph'
|
|
import { AiOutlineBank } from 'react-icons/ai';
|
|
import { BiRupee } from 'react-icons/bi';
|
|
|
|
|
|
export default function Dashboard({ bankDetails }) {
|
|
const banks = []
|
|
let total_balance = 0
|
|
bankDetails.forEach((bank) => {
|
|
total_balance += bank.balance
|
|
banks.push(
|
|
<Bank
|
|
bankLogoSrc={`https://api.foldbank.codingcoffee.me/media/${bank.bank.logo}`}
|
|
bankName={bank.bank.name}
|
|
bankBalance={bank.balance.toLocaleString('en-IN')}
|
|
/>
|
|
)
|
|
})
|
|
|
|
|
|
return (
|
|
<div className={styles.main}>
|
|
<div className={styles.banks}>
|
|
<div
|
|
className={styles.title}
|
|
>
|
|
<AiOutlineBank
|
|
className={styles.banksLogo}
|
|
size={25}
|
|
/>
|
|
Banks
|
|
</div>
|
|
{banks}
|
|
</div>
|
|
<div className={styles.totalBalance}>
|
|
<div
|
|
className={styles.title}
|
|
>
|
|
<div className={styles.rupeeHolder}>
|
|
<BiRupee
|
|
className={styles.rupeeLogo}
|
|
size={20}
|
|
/>
|
|
</div>
|
|
Total Balance
|
|
</div>
|
|
<div className={styles.totalBalanceAmountHolder}>
|
|
<div>₹</div>
|
|
<div className={styles.amount}>{total_balance.toLocaleString('en-IN')}</div>
|
|
</div>
|
|
<div className={styles.message}>
|
|
↑20% compared to previous month
|
|
</div>
|
|
<Graph />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|