From e8e6b75f35a274992c3ddeb9c16e1881fb025426 Mon Sep 17 00:00:00 2001
From: ThomasWalsh1 <Thomasmwalsh217@gmail.com>
Date: Thu, 6 Jun 2024 13:15:27 -0400
Subject: [PATCH 1/3] Added component code

---
 .gitignore                       |  1 +
 src/components/AllocationForm.js | 80 ++++++++++++++++++++++++++++++++
 src/components/Budget.js         | 17 ++++++-
 src/components/ExpenseItem.js    | 37 +++++++++++++++
 src/components/ExpenseList.js    | 25 +++++++++-
 src/components/ExpenseTotal.js   | 15 +++++-
 src/components/Remaining.js      | 16 ++++++-
 7 files changed, 187 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index b6e47617de..dc00b0bc92 100644
--- a/.gitignore
+++ b/.gitignore
@@ -127,3 +127,4 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+node_modules
diff --git a/src/components/AllocationForm.js b/src/components/AllocationForm.js
index 8b13789179..4c4d32c5e4 100644
--- a/src/components/AllocationForm.js
+++ b/src/components/AllocationForm.js
@@ -1 +1,81 @@
+import React, { useContext, useState } from 'react';
+import { AppContext } from '../context/AppContext';
 
+const AllocationForm = (props) => {
+    const { dispatch,remaining  } = useContext(AppContext);
+
+    const [name, setName] = useState('');
+    const [cost, setCost] = useState('');
+    const [action, setAction] = useState('');
+
+    const submitEvent = () => {
+
+            if(cost > remaining) {
+                alert("The value cannot exceed remaining funds  £"+remaining);
+                setCost("");
+                return;
+            }
+
+        const expense = {
+            name: name,
+            cost: parseInt(cost),
+        };
+        if(action === "Reduce") {
+            dispatch({
+                type: 'RED_EXPENSE',
+                payload: expense,
+            });
+        } else {
+                dispatch({
+                    type: 'ADD_EXPENSE',
+                    payload: expense,
+                });
+            }
+    };
+
+    return (
+        <div>
+            <div className='row'>
+
+            <div className="input-group mb-3" style={{ marginLeft: '2rem' }}>
+                    <div className="input-group-prepend">
+                <label className="input-group-text" htmlFor="inputGroupSelect01">Department</label>
+                  </div>
+                  <select className="custom-select" id="inputGroupSelect01" onChange={(event) => setName(event.target.value)}>
+                        <option defaultValue>Choose...</option>
+                        <option value="Marketing" name="marketing"> Marketing</option>
+                <option value="Sales" name="sales">Sales</option>
+                <option value="Finance" name="finance">Finance</option>
+                <option value="HR" name="hr">HR</option>
+                <option value="IT" name="it">IT</option>
+                <option value="Admin" name="admin">Admin</option>
+                  </select>
+
+                    <div className="input-group-prepend" style={{ marginLeft: '2rem' }}>
+                <label className="input-group-text" htmlFor="inputGroupSelect02">Allocation</label>
+                  </div>
+                  <select className="custom-select" id="inputGroupSelect02" onChange={(event) => setAction(event.target.value)}>
+                        <option defaultValue value="Add" name="Add">Add</option>
+                <option value="Reduce" name="Reduce">Reduce</option>
+                  </select>
+
+                    <input
+                        required='required'
+                        type='number'
+                        id='cost'
+                        value={cost}
+                        style={{ marginLeft: '2rem' , size: 10}}
+                        onChange={(event) => setCost(event.target.value)}>
+                        </input>
+
+                    <button className="btn btn-primary" onClick={submitEvent} style={{ marginLeft: '2rem' }}>
+                        Save
+                    </button>
+                </div>
+                </div>
+
+        </div>
+    );
+};
+
+export default AllocationForm;
diff --git a/src/components/Budget.js b/src/components/Budget.js
index 8b13789179..2c1dd8a056 100644
--- a/src/components/Budget.js
+++ b/src/components/Budget.js
@@ -1 +1,16 @@
-
+import React, { useContext, useState } from 'react';
+import { AppContext } from '../context/AppContext';
+const Budget = () => {
+    const { budget } = useContext(AppContext);
+    const [newBudget, setNewBudget] = useState(budget);
+    const handleBudgetChange = (event) => {
+        setNewBudget(event.target.value);
+    }
+    return (
+<div className='alert alert-secondary'>
+<span>Budget: £{budget}</span>
+<input type="number" step="10" value={newBudget} onChange={handleBudgetChange}></input>
+</div>
+    );
+};
+export default Budget;
diff --git a/src/components/ExpenseItem.js b/src/components/ExpenseItem.js
index 8b13789179..7b9f9919db 100644
--- a/src/components/ExpenseItem.js
+++ b/src/components/ExpenseItem.js
@@ -1 +1,38 @@
+import React, { useContext } from 'react';
+import { TiDelete } from 'react-icons/ti';
+import { AppContext } from '../context/AppContext';
 
+const ExpenseItem = (props) => {
+    const { dispatch } = useContext(AppContext);
+
+    const handleDeleteExpense = () => {
+        dispatch({
+            type: 'DELETE_EXPENSE',
+            payload: props.id,
+        });
+    };
+
+    const increaseAllocation = (name) => {
+        const expense = {
+            name: name,
+            cost: 10,
+        };
+
+        dispatch({
+            type: 'ADD_EXPENSE',
+            payload: expense
+        });
+
+    }
+
+    return (
+        <tr>
+        <td>{props.name}</td>
+        <td>£{props.cost}</td>
+        <td><button onClick={event=> increaseAllocation(props.name)}>+</button></td>
+        <td><TiDelete size='1.5em' onClick={handleDeleteExpense}></TiDelete></td>
+        </tr>
+    );
+};
+
+export default ExpenseItem;
diff --git a/src/components/ExpenseList.js b/src/components/ExpenseList.js
index 8b13789179..1388dfe230 100644
--- a/src/components/ExpenseList.js
+++ b/src/components/ExpenseList.js
@@ -1 +1,24 @@
-
+import React, { useContext } from 'react';
+import ExpenseItem from './ExpenseItem';
+import { AppContext } from '../context/AppContext';
+const ExpenseList = () => {
+    const { expenses } = useContext(AppContext);
+    return (
+        <table className='table'>
+              <thead className="thead-light">
+            <tr>
+              <th scope="col">Department</th>
+              <th scope="col">Allocated Budget</th>
+              <th scope="col">Increase by 10</th>
+              <th scope="col">Delete</th>
+            </tr>
+          </thead>
+            <tbody>
+            {expenses.map((expense) => (
+                <ExpenseItem id={expense.id} key={expense.id} name={expense.name} cost={expense.cost} />
+            ))}
+            </tbody>
+        </table>
+    );
+};
+export default ExpenseList;
diff --git a/src/components/ExpenseTotal.js b/src/components/ExpenseTotal.js
index 8b13789179..dfee1975c9 100644
--- a/src/components/ExpenseTotal.js
+++ b/src/components/ExpenseTotal.js
@@ -1 +1,14 @@
-
+import React, { useContext } from 'react';
+import { AppContext } from '../context/AppContext';
+const ExpenseTotal = () => {
+    const { expenses } = useContext(AppContext);
+    const totalExpenses = expenses.reduce((total, item) => {
+        return (total += item.cost);
+    }, 0);
+    return (
+        <div className='alert alert-primary'>
+            <span>Spent so far: £{totalExpenses}</span>
+        </div>
+    );
+};
+export default ExpenseTotal;
diff --git a/src/components/Remaining.js b/src/components/Remaining.js
index 8b13789179..3b40443bd8 100644
--- a/src/components/Remaining.js
+++ b/src/components/Remaining.js
@@ -1 +1,15 @@
-
+import React, { useContext } from 'react';
+import { AppContext } from '../context/AppContext';
+const Remaining = () => {
+    const { expenses, budget } = useContext(AppContext);
+    const totalExpenses = expenses.reduce((total, item) => {
+        return (total = total + item.cost);
+    }, 0);
+    const alertType = totalExpenses > budget ? 'alert-danger' : 'alert-success';
+    return (
+        <div className={`alert ${alertType}`}>
+            <span>Remaining: £{budget - totalExpenses}</span>
+        </div>
+    );
+};
+export default Remaining;

From 21584344323af88acd63c80a6444922cc8d15c0e Mon Sep 17 00:00:00 2001
From: ThomasWalsh1 <Thomasmwalsh217@gmail.com>
Date: Thu, 6 Jun 2024 13:23:02 -0400
Subject: [PATCH 2/3] Added to app UI

---
 src/App.js | 61 ++++++++++++++++++++++++++----------------------------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/App.js b/src/App.js
index 610e47d694..269cbae77e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,47 +1,44 @@
 import React from 'react';
-
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-//Code to import Budget.js
+import { AppProvider } from './context/AppContext';
 import Budget from './components/Budget';
+import ExpenseTotal from './components/ExpenseTotal';
+import ExpenseList from './components/ExpenseList';
+import AllocationForm from './components/AllocationForm';
+import RemainingBudget from './components/Remaining';
 
-// Add code to import the other components here under
-
-
-import { AppProvider } from './context/AppContext';
 const App = () => {
     return (
         <AppProvider>
             <div className='container'>
                 <h1 className='mt-3'>Company's Budget Allocation</h1>
-                    <div className='row mt-3'>
-                        {
-                            /* Add Budget component here */
-                        }        
-
-                        {
-                            /* Add Remaining component here*/
-                        }        
-
-                        {
-                            /* Add ExpenseTotal component here */
-                        }        
-                       
-                        {
-                            /* Add ExpenseList component here */
-                        }         
-
-                        {
-                            /* Add ExpenseItem component here */
-                        }        
-
-                        {
-                            /* Add AllocationForm component here under */
-                        }        
-
+                <div className='row mt-3'>
+                    <div className='col-sm'>
+                        <Budget />
+                    </div>
+                    <div className='col-sm'>
+                        <RemainingBudget />
+                    </div>
+                    <div className='col-sm'>
+                        <ExpenseTotal />
+                    </div>
+                </div>
+                <h3 className='mt-3'>Allocation</h3>
+                <div className='row '>
+                    <div className='col-sm'>
+                        <ExpenseList />
+                    </div>
+                </div>
+                <h3 className='mt-3'>Change allocation</h3>
+                <div className='row mt-3'>
+                    <div className='col-sm'>
+                        <AllocationForm/>
+                    </div>
                 </div>
             </div>
         </AppProvider>
     );
 };
-export default App;
+
+export default App;
\ No newline at end of file

From 2df1fc4ddfb9d17eebbe516af6c9723e912d0510 Mon Sep 17 00:00:00 2001
From: ThomasWalsh1 <Thomasmwalsh217@gmail.com>
Date: Thu, 6 Jun 2024 14:36:32 -0400
Subject: [PATCH 3/3] Finished Final

---
 src/App.js                       |  4 ++++
 src/components/AllocationForm.js |  9 ++++++---
 src/components/Budget.js         | 18 ++++++++++++++++--
 src/components/ExpenseItem.js    | 30 +++++++++++++++++++++++++++---
 src/components/ExpenseList.js    |  1 +
 src/components/ExpenseTotal.js   |  4 ++--
 src/components/Remaining.js      |  4 ++--
 src/context/AppContext.js        |  6 +++---
 8 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/src/App.js b/src/App.js
index 269cbae77e..50e609189e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@ import ExpenseTotal from './components/ExpenseTotal';
 import ExpenseList from './components/ExpenseList';
 import AllocationForm from './components/AllocationForm';
 import RemainingBudget from './components/Remaining';
+import Currency from './components/Currency';
 
 const App = () => {
     return (
@@ -23,6 +24,9 @@ const App = () => {
                     <div className='col-sm'>
                         <ExpenseTotal />
                     </div>
+                    <div className='col-sm'>
+                        <Currency />
+                    </div>
                 </div>
                 <h3 className='mt-3'>Allocation</h3>
                 <div className='row '>
diff --git a/src/components/AllocationForm.js b/src/components/AllocationForm.js
index 4c4d32c5e4..382e7bdbd6 100644
--- a/src/components/AllocationForm.js
+++ b/src/components/AllocationForm.js
@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react';
 import { AppContext } from '../context/AppContext';
 
 const AllocationForm = (props) => {
-    const { dispatch,remaining  } = useContext(AppContext);
+    const { dispatch,remaining, currency} = useContext(AppContext);
 
     const [name, setName] = useState('');
     const [cost, setCost] = useState('');
@@ -58,13 +58,16 @@ const AllocationForm = (props) => {
                         <option defaultValue value="Add" name="Add">Add</option>
                 <option value="Reduce" name="Reduce">Reduce</option>
                   </select>
-
+                    
+                    <label style={{textAlign: "right", display: "inline-block", width: "140px"}}>
+                        {currency}
+                    </label>
                     <input
                         required='required'
                         type='number'
                         id='cost'
                         value={cost}
-                        style={{ marginLeft: '2rem' , size: 10}}
+                        style={{ marginLeft: '1rem' , size: 10}}
                         onChange={(event) => setCost(event.target.value)}>
                         </input>
 
diff --git a/src/components/Budget.js b/src/components/Budget.js
index 2c1dd8a056..f745b312b5 100644
--- a/src/components/Budget.js
+++ b/src/components/Budget.js
@@ -1,14 +1,28 @@
 import React, { useContext, useState } from 'react';
 import { AppContext } from '../context/AppContext';
 const Budget = () => {
-    const { budget } = useContext(AppContext);
+    const { budget, currency} = useContext(AppContext);
     const [newBudget, setNewBudget] = useState(budget);
+    // const [newCurrency, setNewCurrency] = useState(currency);
+
     const handleBudgetChange = (event) => {
         setNewBudget(event.target.value);
     }
+
+    // const handleCurrencyChange = (event) => {
+    //     setNewCurrency(event.target.value);
+    // }
     return (
 <div className='alert alert-secondary'>
-<span>Budget: £{budget}</span>
+<span>Budget: {currency}</span>
+
+{/* <select value={newCurrency} onChange={handleCurrencyChange} style={{backgroundColor: "green", color: "white"}}>
+    <option value="$">$ Dollar</option>
+    <option value="₹">₹ Rupee</option>
+    <option value="£">£ Pound</option>
+    <option value="€">€ Euro</option>
+</select> */}
+
 <input type="number" step="10" value={newBudget} onChange={handleBudgetChange}></input>
 </div>
     );
diff --git a/src/components/ExpenseItem.js b/src/components/ExpenseItem.js
index 7b9f9919db..36385c6063 100644
--- a/src/components/ExpenseItem.js
+++ b/src/components/ExpenseItem.js
@@ -1,9 +1,10 @@
 import React, { useContext } from 'react';
 import { TiDelete } from 'react-icons/ti';
 import { AppContext } from '../context/AppContext';
+import Currency from './Currency';
 
 const ExpenseItem = (props) => {
-    const { dispatch } = useContext(AppContext);
+    const {currency, dispatch } = useContext(AppContext);
 
     const handleDeleteExpense = () => {
         dispatch({
@@ -24,12 +25,35 @@ const ExpenseItem = (props) => {
         });
 
     }
+    const decreaseAllocation = (name) => {
+        const expense = {
+            name: name,
+            cost: -10,
+        };
+
+        dispatch({
+            type: 'ADD_EXPENSE',
+            payload: expense
+        });
+
+    }
+    const buttonStylePlus = {
+        borderRadius: "100px",
+        backgroundColor: 'green',
+        color: "white"
+    };
 
+    const buttonStyleMinus = {
+        borderRadius: "100px",
+        backgroundColor: 'red',
+        color: "white"
+    };
     return (
         <tr>
         <td>{props.name}</td>
-        <td>£{props.cost}</td>
-        <td><button onClick={event=> increaseAllocation(props.name)}>+</button></td>
+        <td>{currency}{props.cost}</td>
+        <td><button style={buttonStylePlus} onClick={event=> increaseAllocation(props.name)}>+</button></td>
+        <td><button style={buttonStyleMinus} onClick={event=> decreaseAllocation(props.name)}>-</button></td>
         <td><TiDelete size='1.5em' onClick={handleDeleteExpense}></TiDelete></td>
         </tr>
     );
diff --git a/src/components/ExpenseList.js b/src/components/ExpenseList.js
index 1388dfe230..23508bb24a 100644
--- a/src/components/ExpenseList.js
+++ b/src/components/ExpenseList.js
@@ -10,6 +10,7 @@ const ExpenseList = () => {
               <th scope="col">Department</th>
               <th scope="col">Allocated Budget</th>
               <th scope="col">Increase by 10</th>
+              <th scope="col">Decrease by 10</th>
               <th scope="col">Delete</th>
             </tr>
           </thead>
diff --git a/src/components/ExpenseTotal.js b/src/components/ExpenseTotal.js
index dfee1975c9..150a7f336c 100644
--- a/src/components/ExpenseTotal.js
+++ b/src/components/ExpenseTotal.js
@@ -1,13 +1,13 @@
 import React, { useContext } from 'react';
 import { AppContext } from '../context/AppContext';
 const ExpenseTotal = () => {
-    const { expenses } = useContext(AppContext);
+    const { expenses, currency } = useContext(AppContext);
     const totalExpenses = expenses.reduce((total, item) => {
         return (total += item.cost);
     }, 0);
     return (
         <div className='alert alert-primary'>
-            <span>Spent so far: £{totalExpenses}</span>
+            <span>Spent so far: {currency}{totalExpenses}</span>
         </div>
     );
 };
diff --git a/src/components/Remaining.js b/src/components/Remaining.js
index 3b40443bd8..8d9881a29b 100644
--- a/src/components/Remaining.js
+++ b/src/components/Remaining.js
@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
 import { AppContext } from '../context/AppContext';
 const Remaining = () => {
-    const { expenses, budget } = useContext(AppContext);
+    const { expenses, budget, currency } = useContext(AppContext);
     const totalExpenses = expenses.reduce((total, item) => {
         return (total = total + item.cost);
     }, 0);
     const alertType = totalExpenses > budget ? 'alert-danger' : 'alert-success';
     return (
         <div className={`alert ${alertType}`}>
-            <span>Remaining: £{budget - totalExpenses}</span>
+            <span>Remaining: {currency}{budget - totalExpenses}</span>
         </div>
     );
 };
diff --git a/src/context/AppContext.js b/src/context/AppContext.js
index 88214dd309..3cc7fec86a 100644
--- a/src/context/AppContext.js
+++ b/src/context/AppContext.js
@@ -69,10 +69,10 @@ export const AppReducer = (state, action) => {
             state.currency = action.payload;
             return {
                 ...state
-            }
+            };
+            default: 
+                return state;
 
-        default:
-            return state;
     }
 };