149 lines
3.7 KiB
TypeScript
149 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import styles from './centerCol.module.css'
|
|
import Dashboard from './Dashboard'
|
|
import BankAccount from './BankAccount'
|
|
import React from 'react'
|
|
import useSWR from 'swr'
|
|
|
|
|
|
export default function CenterCol() {
|
|
const fetcher = (...args) => fetch(...args).then((res) => res.json())
|
|
const { data, error } = useSWR(`http://localhost:8000/api/v1/accounts/`, fetcher)
|
|
|
|
if (error) return <div>Error: Failed to load</div>
|
|
if (!data) return <div>Loading...</div>
|
|
|
|
const bankDetails = data.results
|
|
|
|
// const bankDetails = {
|
|
// banks: [{
|
|
// bankName: "SBI",
|
|
// bankFullName: "State Bank of India",
|
|
// bankLogoSrc: "/sbi.svg",
|
|
// bankAccountBalance: "27,932",
|
|
// infoLines: [{
|
|
// title: "Account Number",
|
|
// value: "34536896852",
|
|
// }, {
|
|
// title: "IFSC Code",
|
|
// value: "SBIN0006586",
|
|
// }, {
|
|
// title: "Swift BIC",
|
|
// value: "6895206BB",
|
|
// }, {
|
|
// title: "Holder's Name",
|
|
// value: "Nishant Verma",
|
|
// }]
|
|
// }, {
|
|
// bankName: "HDFC",
|
|
// bankFullName: "HDFC Bank",
|
|
// bankLogoSrc: "/hdfc.svg",
|
|
// bankAccountBalance: "2,58,630",
|
|
// infoLines: [{
|
|
// title: "Account Number",
|
|
// value: "92531805286",
|
|
// }, {
|
|
// title: "IFSC Code",
|
|
// value: "HDFC0002233",
|
|
// }, {
|
|
// title: "Swift BIC",
|
|
// value: "HDFCINBBBNG",
|
|
// }, {
|
|
// title: "Holder's Name",
|
|
// value: "Nishant Verma",
|
|
// }]
|
|
// }, {
|
|
// bankName: "Axis",
|
|
// bankFullName: "Axis Bank",
|
|
// bankLogoSrc: "/axis.svg",
|
|
// bankAccountBalance: "55,410",
|
|
// infoLines: [{
|
|
// title: "Account Number",
|
|
// value: "34536896852",
|
|
// }, {
|
|
// title: "IFSC Code",
|
|
// value: "SBIN0006586",
|
|
// }, {
|
|
// title: "Swift BIC",
|
|
// value: "6895206BB",
|
|
// }, {
|
|
// title: "Holder's Name",
|
|
// value: "Nishant Verma",
|
|
// }]
|
|
// }, {
|
|
// bankName: "ICICI",
|
|
// bankFullName: "ICICI Bank",
|
|
// bankLogoSrc: "/icici.svg",
|
|
// bankAccountBalance: "7,932",
|
|
// infoLines: [{
|
|
// title: "Account Number",
|
|
// value: "92531805286",
|
|
// }, {
|
|
// title: "IFSC Code",
|
|
// value: "HDFC0002233",
|
|
// }, {
|
|
// title: "Swift BIC",
|
|
// value: "HDFCINBBBNG",
|
|
// }, {
|
|
// title: "Holder's Name",
|
|
// value: "Nishant Verma",
|
|
// }]
|
|
// }]
|
|
// }
|
|
|
|
const bankAccounts = []
|
|
const infoTitles = [
|
|
{
|
|
"title": "Account Number",
|
|
"key": "account_number",
|
|
},
|
|
{
|
|
"title": "IFSC Code",
|
|
"key": "ifsc_code",
|
|
},
|
|
{
|
|
"title": "Swift BIC",
|
|
"key": "swift_bic",
|
|
},
|
|
{
|
|
"title": "Holder's Name",
|
|
"key": "holders_name",
|
|
},
|
|
]
|
|
|
|
bankDetails.forEach((bank) => {
|
|
const infoLines = []
|
|
infoTitles.forEach((option) => {
|
|
infoLines.push({
|
|
"title": option.title,
|
|
"value": bank[option.key],
|
|
})
|
|
})
|
|
|
|
bankAccounts.push(
|
|
<BankAccount
|
|
key={bank.bank.name}
|
|
bankLogoSrc={`http://localhost:8000/media/${bank.bank.logo}`}
|
|
bankName={bank.bank.name}
|
|
bankFullName={bank.bank.name}
|
|
bankAccountBalance={bank.balance}
|
|
infoLines={infoLines}
|
|
/>
|
|
)
|
|
})
|
|
|
|
return (
|
|
<div className={styles.main}>
|
|
<div className={styles.title}>
|
|
<div className={styles.greeting}>Good morning, Nishant</div>
|
|
<div className={styles.date}>It's 3rd of January, a Monday</div>
|
|
</div>
|
|
<Dashboard />
|
|
<div className={styles.accounts}>
|
|
{bankAccounts}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|