Source: Pages/Budget/Budget.js

  1. import './Budget.css';
  2. import dayjs from 'dayjs';
  3. import IconButton from '@mui/material/IconButton';
  4. import DeleteIcon from '@mui/icons-material/Delete';
  5. import EditTransaction from './Transaction/EditTransaction';
  6. import AddTransaction from './Transaction/AddTransaction';
  7. import Button from '@mui/material/Button';
  8. import React, { useEffect, useState } from 'react';
  9. import { Slider } from '../../Components/Slider';
  10. import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
  11. import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
  12. import { DatePicker } from '@mui/x-date-pickers/DatePicker';
  13. import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  14. import { faArrowRightLong } from '@fortawesome/free-solid-svg-icons';
  15. import { HttpInterface } from '../../Session/HttpInterface';
  16. import { BUDGET, SESSION, EXPENSES, INCOMES } from '../../Session/Session';
  17. import { DataGrid, GridToolbarContainer, GridToolbarExport, gridClasses } from '@mui/x-data-grid';
  21. /**
  22.  * Component which are to be displayed on the budget-page. It contains
  23.  * a Slider component for adjusting the boundary of the budget as well
  24.  * as DatePicker components for adjusting the starting date and ending
  25.  * date of the budget. It also displays DataGrid tables which contains incomes
  26.  * and transactions with the possibility of adding, editing, and deleting
  27.  * a transaction. Lastly, it displays a short summary of the status of the
  28.  * budget as clean text.
  29.  */
  30. export function Budget() {
  32.     /**
  33.      * Row cell which contains a button for editing a transaction
  34.      * labeled as an income.
  35.      */
  36.     const editIncomeCell = {
  37.         field: '_links.transaction.href',
  38.         headerName: '',
  39.         sortable: false,
  40.         filterable: false,
  41.         width: 10,
  42.         renderCell: row =>
  43.             <EditTransaction 
  44.                 data = {row} 
  45.                 updateTransaction = {updateTransaction}
  46.                 type = {'Income'}
  47.             />
  48.     };
  51.     /**
  52.      * Row cell which contains a button for editing a transaction
  53.      * labeled as an expense.
  54.      */
  55.     const editExpenseCell = {
  56.         field: '_links.transaction.href',
  57.         headerName: '',
  58.         sortable: false,
  59.         filterable: false,
  60.         width: 10,
  61.         renderCell: row =>
  62.             <EditTransaction 
  63.                 data = {row} 
  64.                 updateTransaction = {updateTransaction}
  65.                 type = {'Expense'}
  66.             />
  67.     };
  70.     /**
  71.      * Row cell which contains a button for deleting a transaction.
  72.      */
  73.     const deleteCell = {
  74.         field: '_links.self.href',
  75.         headerName: '',
  76.         sortable: false,
  77.         filterable: false,
  78.         width: 10,
  79.         renderCell: row =>
  80.             <IconButton onClick = {() => onDelClick(row.id)}>
  81.                 <DeleteIcon color = "error" />
  82.             </IconButton>
  83.     };
  87.     /**
  88.      * Row cells which contains the name, date, and value of an income
  89.      * as well as the edit button and the delete button.
  90.      */
  91.     const incomeColumns = [
  92.         {field: 'tname', headerName: 'Title', width: 122},
  93.         {field: 'date', headerName: 'Date', width: 98},
  94.         {field: 'value', headerName: 'Price', width: 72},
  95.         editIncomeCell,
  96.         deleteCell
  97.     ];
  101.     /**
  102.      * Row cells which contains the name, date, and value of an expense
  103.      * as well as the edit button and the delete button.
  104.      */
  105.     const expenseColumns = [
  106.         {field: 'tname', headerName: 'Title', width: 122},
  107.         {field: 'date', headerName: 'Date', width: 98},
  108.         {field: 'value', headerName: 'Price', width: 72},
  109.         editExpenseCell,
  110.         deleteCell
  111.     ];
  115.     /** Array of all transactions categorized as expenses. */
  116.     const [expenses, setExpenses] = useState([]);
  118.     /** Array of all transactions categorized as incomes. */
  119.     const [incomes,  setIncomes]  = useState([]);
  121.     /** Sum of all income transactions. */
  122.     const [totalIncome, setTotalIncome] = useState();
  124.     /** Sum of all expense transactions. */
  125.     const [totalExpense, setTotalExpense] = useState();
  127.     /** Start-date of the budget. */
  128.     const [budgetStartDate, setBudgetStartDate] = useState('2023-03-22');
  130.     /** Start-date of the budget. */
  131.     const [budgetEndDate, setBudgetEndDate] = useState('2023-03-22');
  135.     /**
  136.      * Fetches all expenses associated with the budget ordered by
  137.      * the date of the transactions. Since each expense is stored
  138.      * in the database with a negative value, each transaction is
  139.      * iterated through in order to convert the value into a positive
  140.      * integer instead.
  141.      */
  142.     const getExpenses = async () => {
  144.         /** Retrieves the array of expenses from the HTTP Interface. */
  145.         const exp = await HttpInterface.fetchAllExpenses2();
  146.         if (exp !== undefined) {
  148.             /* Iterates through each element in the array. */
  149.             for (let trans of exp) {
  151.                 /* Iterates through each field of the given transaction object. */
  152.                 for (let field in trans) {
  154.                     /* If the field is a number, the value is multiplied with -1. */
  155.                     if (!isNaN(trans[field])) {
  156.                         trans[field] = trans[field] * -1;
  157.                         break;
  158.                     }
  159.                 }
  160.             }
  162.             /* Updates the expenses variable. */
  163.             setExpenses(exp); 
  164.         }
  165.     };
  169.     /**
  170.      * Fetches all incomes associated with the budget ordered by
  171.      * the date of the transactions.
  172.      */
  173.     const getIncomes = async () => {
  175.         /** Retrieves the array of incomes from the HTTP Interface. */
  176.         const inc = await HttpInterface.fetchAllIncomes2();
  178.         /* Updates the incomes variable. */
  179.         setIncomes(inc); 
  180.     };
  184.     /**
  185.      * Updates a given transaction with new data. The new transaction
  186.      * is forwarded to the HTTP Interface, which again sends a /PUT 
  187.      * request to the server.
  188.      * 
  189.      * @param trans The new transaction.
  190.      * @param link  The link to the transaction.
  191.      * @param type  The type of the transaction which is either "Income" or "Expense".
  192.      */
  193.     const updateTransaction = (trans, link, type) => {
  195.         /* If the transaction is an expense, the value is turned to a negative number. */
  196.         if (type === 'Expense') {
  197.             trans.value = trans.value * (-1);
  198.         }
  200.         /* Splits the provided link at each '/'. */
  201.         let splitted = link.split('/');
  203.         /* Retrieves the ID of the transaction which is after the last '/'. */
  204.         let transactionId = Number(splitted[splitted.length - 1]);
  206.         /** The updated transaction on a format which can be sent to the server. */
  207.         const newTransaction = {
  208.             name: trans.tname,
  209.             value: Number(trans.value),
  210.             description: trans.description,
  211.             date: trans.date,
  212.             bid: Number(BUDGET.budgetId)
  213.         };
  215.         /* HTTP Interface makes a /PUT request to the server with the ID and the new transaction. */
  216.         HttpInterface.updateTransaction(transactionId, newTransaction);
  218.         /* Fetches the expenses and incomes again. */
  219.         getExpenses();
  220.         getIncomes();
  221.     };
  225.     /**
  226.      * Adds a new transaction to the budget. The transaction is forwarded to the
  227.      * HTTP Interface which again sends a /POST request to the server.
  228.      */
  229.     const addTransaction = (trans, type) => {
  231.         /* If the transaction is an expense, the value is turned to a negative number. */
  232.         if (type === 'Expense') {
  233.             trans.value = trans.value * (-1);
  234.         }
  236.         /** The new transaction on a format which can be sent to the server. */
  237.         const newTransaction = {
  238.             name: trans.tname,
  239.             value: Number(trans.value),
  240.             description: trans.description,
  241.             date: trans.date,
  242.             bid: Number(BUDGET.budgetId)
  243.         };
  245.         /* HTTP Interface makes a /POST request to the server with the new transaction. */
  246.         HttpInterface.addTransaction(newTransaction);
  248.         /* Fetches the expenses and incomes again. */
  249.         getExpenses();
  250.         getIncomes();
  251.     };
  255.     /**
  256.      * Deletes a given transaction by having the HTTP Interface send a /DELETE
  257.      * request to the server.
  258.      * 
  259.      * @param link The link to the transaction to be deleted.
  260.      */
  261.     const onDelClick = (link) => {
  263.         /* Prompts the user to confirm deletion. */
  264.         const confirmed = window.confirm("Delete this transaction?");
  266.         if (confirmed) {
  268.             /* Retrieves the ID of the transaction from the link. */
  269.             let splitted = link.split('/');
  270.             let transactionId = Number(splitted[splitted.length - 1]);
  272.             /* HTTP Interface makes a /DELETE request to the server of the given transaction. */
  273.             HttpInterface.deleteTransaction(transactionId);
  274.         }
  275.     };
  279.     /**
  280.      * Updates the budget upon pressing the apply changes button by updating
  281.      * the start- and end-date and having the HTTP Interface send a /PUT request
  282.      * to the server.
  283.      */
  284.     const handleApply = () => {
  285.         BUDGET.setStartDate(budgetStartDate.format('YYYY-MM-DD'));
  286.         BUDGET.setEndDate(budgetEndDate.format('YYYY-MM-DD'));
  287.         HttpInterface.updateBudget();
  288.     };
  292.     /**
  293.      * Updates the values which are to be displayed in the summary of
  294.      * the budget status.
  295.      */
  296.     const updateStatus = () => {
  297.         let sumExp = 0;
  298.         let sumInc = 0;
  300.         /* Sums all expense values. */
  301.         for (let e of EXPENSES) {
  302.             sumExp += e.value;
  303.         }
  305.         /* Sums all income values. */
  306.         for (let i of INCOMES) {
  307.             sumInc += i.value;
  308.         }
  310.         /* Updates the totalExpense and totalIncome variables. */
  311.         setTotalExpense(sumExp * (-1));
  312.         setTotalIncome(sumInc);
  313.     };
  317.     /**
  318.      * Updates the start- and ending-date of the budget.
  319.      */
  320.     const updateBudgetDates = () => {
  321.         let start = BUDGET.getStartDate();
  322.         let end = BUDGET.getEndDate();
  323.         setBudgetStartDate(dayjs(start));
  324.         setBudgetEndDate(dayjs(end));
  325.     };
  329.     /**
  330.      * Activates upon changing the date in the DatePicker
  331.      * for budget start-date.
  332.      * 
  333.      * @param {String} value The new date in YYYY-MM-DD format.
  334.      */
  335.     const updateBudgetStartDate = (value) => {
  336.         BUDGET.setStartDate(value);
  337.         setBudgetStartDate(value);
  338.     }
  342.     /**
  343.      * Activates upon changing the date in the DatePicker
  344.      * for budget end-date.
  345.      * 
  346.      * @param {String} value The new date in YYYY-MM-DD format.
  347.      */
  348.     const updateBudgetEndDate = (value) => {
  349.         BUDGET.setEndDate(value);
  350.         setBudgetEndDate(value);
  351.     }
  355.     /**
  356.      * UseEffect hook which activates upon changes
  357.      * to the incomes or expenses variables. Upon
  358.      * activation, it refreshes all data which are to
  359.      * be displayed on the budget-page.
  360.      */
  361.     useEffect( () => {
  362.         let interval = setInterval(() => {
  363.             if (SESSION.getAuth()) {
  364.                 getExpenses();
  365.                 getIncomes();
  366.                 updateStatus();
  367.                 updateBudgetDates();
  368.                 clearInterval(interval);
  369.             }
  370.         }, 10);
  371.     }, [incomes, expenses]);
  375.     return( 
  376.         <article>
  377.             <header>
  378.                 <h1>Budget</h1>
  379.             </header>
  380.             <hr/>
  381.             <div id="expense-container">
  382.                 <h2 id="expense-container-label">Expense</h2>
  383.                 <div style={{ minHeight: '100%', maxHeight: '100%', width: '100%' }}>
  384.                     <DataGrid
  385.                         rows = {expenses}
  386.                         autoHeight = {true}
  387.                         getRowHeight={({ id, densityFactor }) => {
  388.                             if (expenses.length %2 !== 0 && id == expenses[expenses.length - 1]._links.self.href) {
  389.                               return 104 * densityFactor;
  390.                             }
  391.                             return null;
  392.                           }
  393.                         }
  394.                         columns = {expenseColumns}
  395.                         disableRowSelectionOnClick = {true}
  396.                         getRowId = {row => row._links.self.href}
  397.                         components = {{Toolbar: CustomToolbar}}
  398.                         initialState={{
  399.                             pagination: { paginationModel: { pageSize: 2 } },
  400.                         }}
  401.                         pageSizeOptions={[2]}
  402.                     />
  403.                 </div>
  404.                 <br/>
  405.                 <AddTransaction addTransaction = { addTransaction } type = {'Expense'}/>
  406.             </div>
  407.             <div id="income-container">
  408.                 <h2 id="income-container-label">Income</h2>
  409.                 <div style={{  minHeight: '100%', maxHeight: '100%', width: '100%' }}>
  410.                     <DataGrid
  411.                         rows = {incomes}
  412.                         autoHeight = {true}
  413.                         getRowHeight={({ id, densityFactor }) => {
  414.                             if (incomes.length %2 !== 0 && id == incomes[incomes.length - 1]._links.self.href ) {
  415.                               return 104 * densityFactor;
  416.                             }
  417.                             return null;
  418.                           }
  419.                         }
  420.                         columns = {incomeColumns}
  421.                         disableRowSelectionOnClick = {true}
  422.                         getRowId = {row => row._links.self.href}
  423.                         components = {{Toolbar: CustomToolbar}}
  424.                         initialState={{
  425.                             pagination: { paginationModel: { pageSize: 2 } },
  426.                         }}
  427.                         pageSizeOptions={[2]}
  428.                     />
  429.                 </div>
  430.                 <br/>
  431.                 <AddTransaction addTransaction = { addTransaction } type = {'Income'} />
  432.             </div>
  433.             <div id="budget-margin">
  434.                 <h2 id="margin-label">Margin</h2>
  435.                 <Slider/>
  436.                 <br/><br/>
  437.                 <Button 
  438.                     variant = "contained"
  439.                     onClick = {handleApply}
  440.                 >
  441.                     Apply Changes
  442.                 </Button>
  443.                 <br/>
  444.                 <br/>
  445.                 <div id="budget-date-range-container">
  446.                     <div id="start-date-container">
  447.                         <LocalizationProvider dateAdapter={AdapterDayjs}>
  448.                             <DatePicker
  449.                                 name = "Start"
  450.                                 label = "Start"
  451.                                 value = {dayjs(budgetStartDate)}
  452.                                 onChange = {(value) => updateBudgetStartDate(value.format('YYYY-MM-DD'))}
  453.                                 maxDate = {budgetEndDate}
  454.                             />
  455.                         </LocalizationProvider>
  456.                     </div>
  458.                     <div id="end-date-container">
  459.                         <LocalizationProvider dateAdapter={AdapterDayjs}>
  460.                             <DatePicker
  461.                                 name = "End"
  462.                                 label = "End"
  463.                                 value = {dayjs(budgetEndDate)}
  464.                                 onChange = {(value) => updateBudgetEndDate(value.format('YYYY-MM-DD'))}
  465.                                 minDate = {budgetStartDate}
  466.                             />
  467.                         </LocalizationProvider>
  468.                     </div>
  469.                 </div>
  470.             </div>
  471.             <div id="date-range-divider">
  472.                     <FontAwesomeIcon icon={faArrowRightLong} id="arrow"/>
  473.                 </div>
  474.             <div id="status-container">
  475.                 <h2 id="status-container-label">Staus</h2>
  476.                 <p>Total income: <i id="total-income"> KR {totalIncome}</i></p>
  477.                 <p>Total expense: <i id="total-expense"> KR {totalExpense}</i></p>
  478.                 <p>Budget spendings: <i id="budget-spendings"> KR {totalExpense - totalIncome} / {BUDGET.getBoundary()}</i></p>
  479.                 <p>Margin: <i id="margin"> KR {BUDGET.getBoundary() + totalIncome - totalExpense}</i></p>
  480.             </div>
  481.         </article>
  482.     );
  483. }
  488. /**
  489.  * Customized ToolBar component for the DataGrid components which
  490.  * displays the transactions.
  491.  */
  492. function CustomToolbar() {
  493.     return (
  494.         <GridToolbarContainer
  495.             className = {gridClasses.toolbarContainer}>
  496.             <GridToolbarExport />
  497.         </GridToolbarContainer>
  498.     );
  499. };