Expense List
diff --git a/frontend/src/pages/Wallet.js b/frontend/src/pages/Wallet.js
new file mode 100644
index 0000000..a4a48a8
--- /dev/null
+++ b/frontend/src/pages/Wallet.js
@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useWallet } from '../hooks/useWallet';
+import { useLabels } from '../hooks/useLabels';
+import { LinearProgress } from '@mui/material';
+
+const Wallet = () => {
+ // Placeholder data
+ const loading = false;
+ const walletData = {
+ current_amount: 1500,
+ monthly_earnings: 2000,
+ monthly_expenses: 500,
+ };
+
+ const labelsData = [
+ { id: 1, name: 'Groceries' },
+ { id: 2, name: 'Rent' },
+ { id: 3, name: 'Utilities' },
+ { id: 4, name: 'Entertainment' },
+ { id: 5, name: 'Savings' },
+ { id: 6, name: 'Transportation' },
+ ];
+
+ const goalsData = [
+ { labelId: 1, goal: 300 }, // Groceries
+ { labelId: 2, goal: 1000 }, // Rent
+ { labelId: 3, goal: 150 }, // Utilities
+ { labelId: 4, goal: 200 }, // Entertainment
+ { labelId: 5, goal: 500 }, // Savings
+ { labelId: 6, goal: 100 }, // Transportation
+ ];
+
+ const [wallet, setWallet] = useState(walletData);
+ const [labels, setLabels] = useState(labelsData);
+ const [goals, setGoals] = useState(goalsData);
+
+ return (
+
+ {/* Wallet Information and Forms*/}
+
+
+ {/* TODO: Add New Goal form*/}
+
+ {/* TODO: Adjust Goal form*/}
+
+
+
+ {/* Goals Grid */}
+
+
Goals
+
+ {labels.map(label => {
+ const goal = goals.find(g => g.labelId === label.id);
+ return goal ? (
+
+
{label.name}
+
+
{`${wallet.current_amount} / ${goal.goal}`}
+
+ ) : (
+
+
{label.name}
+
No goal set
+
+ );
+ })}
+
+
+
+ );
+};
+
+export default Wallet;
\ No newline at end of file