You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.6 KiB
59 lines
1.6 KiB
import React from 'react';
|
|
import { useState } from 'react'
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
|
import { AppProvider } from '../context/AppContext';
|
|
import FetchAPI from '../components/budget';
|
|
import ExpenseTotal from '../components/ExpenseTotal';
|
|
import ExpenseList from '../components/ExpenseList';
|
|
import AddExpenseForm from '../components/AddExpenseForm';
|
|
import RemainingBudget from '../components/Remaining';
|
|
import AddIncome from '../components/AddIncome'
|
|
import QuickTransaction from '../components/QuickTransaction'
|
|
import CategorizedExpenses from '../components/CategorizedExpenses';
|
|
import CategorizedIncome from '../components/CategorizedIncome';
|
|
import { Typography } from '@mui/material';
|
|
import LoanCalculator from '../components/LoanCalculator';
|
|
|
|
export default function Dashboard() {
|
|
|
|
return (
|
|
<AppProvider>
|
|
<div className='container-fluid'>
|
|
<div className='row align-items-stretch'>
|
|
<div className='col-sm'>
|
|
<FetchAPI />
|
|
</div>
|
|
<div className='col-sm widget d-flex align-items-center justify-content-between'>
|
|
<RemainingBudget />
|
|
</div>
|
|
<div className='col-sm'>
|
|
{/* <ExpenseTotal /> */}
|
|
</div>
|
|
</div>
|
|
|
|
<div className='row mt-3'>
|
|
<div className='col'>
|
|
<AddExpenseForm/>
|
|
</div>
|
|
<div className='col'>
|
|
<ExpenseList />
|
|
</div>
|
|
</div>
|
|
|
|
<div className='row mt-3'>
|
|
<div className='col-12 col-md-12 col-lg-4'>
|
|
<LoanCalculator/>
|
|
</div>
|
|
<div className='col-12 col-lg-4'>
|
|
<CategorizedExpenses/>
|
|
</div>
|
|
<div className='col-12 col-lg-4'>
|
|
<CategorizedIncome/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppProvider>
|
|
);
|
|
}
|