add: added routes and improved frontend

back/api/@me.js

@@ -1,11 +1,11 @@
 const express = require('express');
 const router = express.Router();
-const { getConnection, getUserAccounts, getUserCards } = require('../libs/mysql');
+const { getConnection, getUserAccounts, getUserCards, getUserTransfers, setAccountBalance, getAccount, addTransfer } = require('../libs/mysql');
 const { checkAuth } = require('../libs/middlewares');
 
 router.post('/', checkAuth, async (req, res) => {
     const user = req.user;
-    res.send({ id: user.id, name: user.name, lastname: user.lastname, admin: user.admin });  
+    res.send(user);  
 });
 
 router.post('/accounts', checkAuth, async (req, res) => {
@@ -13,11 +13,7 @@ router.post('/accounts', checkAuth, async (req, res) => {
     const connection = await getConnection();
     const accounts = await getUserAccounts(connection, user.id);
     connection.end();
-
+    res.send(accounts);
-    if (!accounts[0]) {
-        return res.status(404).send({ error: 'No accounts found' });
-    }
-    res.send({ accounts: accounts });
 });
 
 router.post('/cards', checkAuth, async (req, res) => {
@@ -25,11 +21,47 @@ router.post('/cards', checkAuth, async (req, res) => {
     const connection = await getConnection();
     const cards = await getUserCards(connection, user.id);
     connection.end();
+    res.send(cards);
+});
 
-    if (!cards[0]) {
+router.post('/transfers', checkAuth, async (req, res) => {
-        return res.status(404).send({ error: 'No cards found' });
+    const user = req.user;
+    const connection = await getConnection();
+    const transfers = await getUserTransfers(connection, user.id);
+    connection.end();
+    res.send(transfers);
+});
+
+router.post('/send-money', checkAuth, async (req, res) => {
+    const user = req.user;
+    const { account_from_id, account_to_id, amount, name } = req.body;
+
+    if (!account_from_id || !account_to_id || !amount || !name) {
+        return res.status(400).send({ error: 'Missing required fields' });
     }
-    res.send({ cards: cards });
+
+    const connection = await getConnection();
+    const accountFrom = await getAccount(connection, account_from_id);
+    const accountTo = await getAccount(connection, account_to_id);
+
+    if (!accountFrom[0] || !accountTo[0]) {
+        return res.status(400).send({ error: 'Invalid account ID' });
+    }
+
+    if (accountFrom[0].client_id !== user.id) {
+        return res.status(403).send({ error: 'You are not authorized to send money from this account' });
+    }
+
+    if (accountFrom[0].balance < amount) {
+        return res.status(400).send({ error: 'Insufficient funds' });
+    }
+
+    await setAccountBalance(connection, account_from_id, accountFrom[0].balance - amount);
+    await setAccountBalance(connection, account_to_id, accountTo[0].balance + amount);
+    await addTransfer(connection, account_from_id, account_to_id, name, amount);
+    connection.end();
+
+    res.send({ message: 'Money sent successfully' });
 });
 
 module.exports = router;

back/api/accounts.js

@@ -1,9 +0,0 @@
-const express = require('express');
-const { getConnection } = require('../libs/mysql');
-const { checkAuth } = require('../libs/middlewares');
-
-const router = express.Router();
-
-
-
-module.exports = router;

back/api/users.js

@@ -1,9 +1,212 @@
 const express = require('express');
-const { getConnection, addUser } = require('../libs/mysql');
+const { getConnection, addUser, getUsers, getUser, getUserAccounts, addAccount, removeAccount, getUserCards, addCard, removeCard, setAccountBalance, getAccount } = require('../libs/mysql');
 const { checkAuth } = require('../libs/middlewares');
 
 const router = express.Router();
 
+router.post('/', checkAuth, async (req, res) => {
+    const user = req.user;
+
+    if (!user.admin) {
+        return res.status(403).json({ error: 'Permission denied' });
+    }
+
+    const connection = await getConnection();
+    const users = await getUsers(connection);
+    connection.end();
+
+    res.send(users );
+});
+
+router.post('/:id', checkAuth, async (req, res) => {
+    const this_user = req.user;
+    const { id } = req.params;
+
+    if (!this_user.admin) {
+        return res.status(403).json({ error: 'Permission denied' });
+    }
+
+    const connection = await getConnection();
+    const user = await getUser(connection, id);
+    connection.end();
+
+    if (!user[0]) {
+        return res.status(404).send({ error: 'User not found' });
+    }
+
+    res.send(user[0]);
+});
+
+router.post('/:id/accounts', checkAuth, async (req, res) => {
+    const this_user = req.user;
+    const { id } = req.params;
+
+    if (!this_user.admin) {
+        return res.status(403).json({ error: 'Permission denied' });
+    }
+
+    const connection = await getConnection();
+    const user = await getUser(connection, id);
+
+    if (!user[0]) {
+        return res.status(404).send({ error: 'User not found' });
+    }
+
+    const accounts = await getUserAccounts(connection, id);
+    connection.end();
+
+    res.send(accounts);
+});
+
+router.post('/:user_id/accounts/:account_id/delete', checkAuth, async (req, res) => {
+    const this_user = req.user;
+    const { user_id, account_id } = req.params;
+
+    if (!this_user.admin) {
+        return res.status(403).json({ error: 'Permission denied' });
+    }
+
+    const connection = await getConnection();
+    const user = await getUser(connection, user_id);
+
+    if (!user[0]) {
+        return res.status(404).send({ error: 'User not found' });
+    }
+
+    await removeAccount(connection, account_id);
+    connection.end();
+
+    res.send({ message: 'Account removed' });
+});
+
+router.post('/:user_id/accounts/:account_id/add-balance', checkAuth, async (req, res) => {
+    const this_user = req.user;
+    const { user_id, account_id } = req.params;
+    const { balance } = req.body;
+    if (!this_user.admin) {
+        return res.status(403).json({ error: 'Permission denied' });
+    }
+
+    if (!balance) {
+        return res.status(400).json({ error: 'Balance is required' });
+    }
+
+    const connection = await getConnection();
+    const user = await getUser(connection, user_id);
+
+    if (!user[0]) {
+        return res.status(404).send({ error: 'User not found' });
+    }
+
+    const account = await getAccount(connection, account_id);
+
+    if (!account[0]) {
+        return res.status(404).send({ error: 'Account not found' });
+    }
+
+    await setAccountBalance(connection, account_id, account[0].balance + balance);
+    connection.end();
+
+    res.send({ message: 'Balance added' });
+});
+
+
+router.post('/:id/create-account', checkAuth, async (req, res) => {
+    const this_user = req.user;
+    const { name } = req.body;
+    const { id } = req.params;
+
+    if (!this_user.admin) {
+        return res.status(403).json({ error: 'Permission denied' });
+    }
+
+    if (!name) {
+        return res.status(400).json({ error: 'Name is required' });
+    }
+
+    const connection = await getConnection();
+    const user = await getUser(connection, id);
+
+    if (!user[0]) {
+        return res.status(404).send({ error: 'User not found' });
+    }
+
+    await addAccount(connection, id, name);
+    connection.end();
+
+    res.send({ message: 'Account created' });
+});
+
+router.post('/:id/cards', checkAuth, async (req, res) => {
+    const this_user = req.user;
+    const { id } = req.params;
+
+    if (!this_user.admin) {
+        return res.status(403).json({ error: 'Permission denied' });
+    }
+
+    const connection = await getConnection();
+    const user = await getUser(connection, id);
+
+    if (!user[0]) {
+        return res.status(404).send({ error: 'User not found' });
+    }
+
+    const cards = await getUserCards(connection, id);
+    connection.end();
+
+    res.send(cards);
+});
+
+router.post('/:user_id/cards/:card_id/delete', checkAuth, async (req, res) => {
+    const this_user = req.user;
+    const { user_id, card_id } = req.params;
+
+    if (!this_user.admin) {
+        return res.status(403).json({ error: 'Permission denied' });
+    }
+
+    const connection = await getConnection();
+    const user = await getUser(connection, user_id);
+
+    if (!user[0]) {
+        return res.status(404).send({ error: 'User not found' });
+    }
+
+    await removeCard(connection, card_id);
+    connection.end();
+
+    res.send({ message: 'Card removed' });
+});
+
+router.post('/:user_id/create-card', checkAuth, async (req, res) => {
+    const this_user = req.user;
+    const { user_id } = req.params;
+    const { account_id } = req.body;
+
+    if (!this_user.admin) {
+        return res.status(403).json({ error: 'Permission denied' });
+    }
+
+    const connection = await getConnection();
+    const user = await getUser(connection, user_id);
+
+    if (!user[0]) {
+        return res.status(404).send({ error: 'User not found' });
+    }
+
+    const numero = Math.floor(Math.random() * 1000000000);
+    const expiration = new Date();
+    expiration.setFullYear(expiration.getFullYear() + 5);
+    const expirationString = `${expiration.getMonth() + 1}/${expiration.getFullYear() % 100}`;
+    const cvc = Math.floor(Math.random() * 1000);
+
+    await addCard(connection, account_id, numero, expirationString, cvc);
+    connection.end();
+
+    res.send({ message: 'Card created' });
+});
+
 router.post('/add', checkAuth, async (req, res) => {
     const user = req.user;
     const { name, lastname, email, numero, password } = req.body;

back/bank.sql

@@ -2,8 +2,8 @@
 -- version 5.2.1
 -- https://www.phpmyadmin.net/
 --
--- Host: leizour.fr
+-- Host: mysql
--- Generation Time: Apr 09, 2025 at 02:41 PM
+-- Generation Time: Apr 27, 2025 at 01:27 PM
 -- Server version: 10.11.3-MariaDB-1:10.11.3+maria~ubu2204
 -- PHP Version: 8.1.19
 
@@ -20,6 +20,8 @@ SET time_zone = "+00:00";
 --
 -- Database: `bank`
 --
+CREATE DATABASE IF NOT EXISTS `bank` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
+USE `bank`;
 
 -- --------------------------------------------------------
 
@@ -27,12 +29,14 @@ SET time_zone = "+00:00";
 -- Table structure for table `accounts`
 --
 
-CREATE TABLE `accounts` (
+CREATE TABLE IF NOT EXISTS `accounts` (
-  `id` int(11) NOT NULL,
+  `id` int(11) NOT NULL AUTO_INCREMENT,
-  `balance` bigint(20) NOT NULL,
+  `balance` bigint(20) NOT NULL DEFAULT 0,
   `client_id` int(11) NOT NULL,
   `name` varchar(20) NOT NULL,
-  `interest` float NOT NULL DEFAULT 0
+  `interest` float NOT NULL DEFAULT 0,
+  PRIMARY KEY (`id`),
+  KEY `client_id` (`client_id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
 -- --------------------------------------------------------
@@ -41,12 +45,14 @@ CREATE TABLE `accounts` (
 -- Table structure for table `cards`
 --
 
-CREATE TABLE `cards` (
+CREATE TABLE IF NOT EXISTS `cards` (
-  `id` int(11) NOT NULL,
+  `id` int(11) NOT NULL AUTO_INCREMENT,
   `account_id` int(11) NOT NULL,
   `number` int(11) NOT NULL,
   `expiration` timestamp NOT NULL,
-  `cvc` int(11) NOT NULL
+  `cvc` int(11) NOT NULL,
+  PRIMARY KEY (`id`),
+  KEY `account_id` (`account_id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
 -- --------------------------------------------------------
@@ -55,12 +61,15 @@ CREATE TABLE `cards` (
 -- Table structure for table `transfers`
 --
 
-CREATE TABLE `transfers` (
+CREATE TABLE IF NOT EXISTS `transfers` (
-  `id` int(11) NOT NULL,
+  `id` int(11) NOT NULL AUTO_INCREMENT,
   `account_from_id` int(11) NOT NULL,
   `account_to_id` int(11) NOT NULL,
   `name` varchar(30) NOT NULL,
-  `value` int(11) NOT NULL
+  `value` int(11) NOT NULL,
+  PRIMARY KEY (`id`),
+  KEY `account_from_id` (`account_from_id`),
+  KEY `account_to_id` (`account_to_id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
 -- --------------------------------------------------------
@@ -69,71 +78,39 @@ CREATE TABLE `transfers` (
 -- Table structure for table `users`
 --
 
-CREATE TABLE `users` (
+CREATE TABLE IF NOT EXISTS `users` (
-  `id` int(11) NOT NULL,
+  `id` int(11) NOT NULL AUTO_INCREMENT,
   `name` varchar(20) NOT NULL,
   `lastname` varchar(20) NOT NULL,
   `password` varchar(150) NOT NULL,
   `email` varchar(100) NOT NULL,
   `numero` varchar(20) NOT NULL,
-  `admin` tinyint(1) NOT NULL
+  `admin` tinyint(1) DEFAULT NULL,
+  PRIMARY KEY (`id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
 --
--- Indexes for dumped tables
+-- Constraints for dumped tables
 --
 
 --
--- Indexes for table `accounts`
+-- Constraints for table `accounts`
 --
 ALTER TABLE `accounts`
-  ADD PRIMARY KEY (`id`);
+  ADD CONSTRAINT `client_id` FOREIGN KEY (`client_id`) REFERENCES `users` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;
 
 --
--- Indexes for table `cards`
+-- Constraints for table `cards`
 --
 ALTER TABLE `cards`
-  ADD PRIMARY KEY (`id`);
+  ADD CONSTRAINT `account_id` FOREIGN KEY (`account_id`) REFERENCES `accounts` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;
 
 --
--- Indexes for table `transfers`
+-- Constraints for table `transfers`
 --
 ALTER TABLE `transfers`
-  ADD PRIMARY KEY (`id`);
+  ADD CONSTRAINT `account_from_id` FOREIGN KEY (`account_from_id`) REFERENCES `accounts` (`id`) ON DELETE CASCADE ON UPDATE CASCADE,
-
+  ADD CONSTRAINT `account_to_id` FOREIGN KEY (`account_to_id`) REFERENCES `accounts` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;
---
--- Indexes for table `users`
---
-ALTER TABLE `users`
-  ADD PRIMARY KEY (`id`);
-
---
--- AUTO_INCREMENT for dumped tables
---
-
---
--- AUTO_INCREMENT for table `accounts`
---
-ALTER TABLE `accounts`
-  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
-
---
--- AUTO_INCREMENT for table `cards`
---
-ALTER TABLE `cards`
-  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
-
---
--- AUTO_INCREMENT for table `transfers`
---
-ALTER TABLE `transfers`
-  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
-
---
--- AUTO_INCREMENT for table `users`
---
-ALTER TABLE `users`
-  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
 COMMIT;
 
 /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

back/libs/mysql.js

@@ -91,6 +91,66 @@ function getUserAccounts(connection, id) {
 	});
 }
 
+function getAccount(connection, id) {
+	return new Promise((resolve, reject) => {
+		connection.query(
+			`SELECT * FROM accounts WHERE id = ?`,
+			[id],
+			(error, result) => {
+				if (error) {
+					reject(new Error(error));
+				}
+				resolve(result);
+			}
+		);
+	});
+}
+
+function addAccount(connection, client_id, name) {
+	return new Promise((resolve, reject) => {
+		connection.query(
+			`INSERT INTO accounts (client_id, name) VALUES (?, ?)`,
+			[client_id, name],
+			(error, result) => {
+				if (error) {
+					reject(new Error(error));
+				}
+				resolve(result);
+			}
+		);
+	});
+}
+
+function removeAccount(connection, id) {
+	return new Promise((resolve, reject) => {
+		connection.query(
+			`DELETE FROM accounts WHERE id = ?`,
+			[id],
+			(error, result) => {
+				if (error) {
+					reject(new Error(error));
+				}
+				resolve(result);
+			}
+		);
+	});
+}
+
+function setAccountBalance(connection, id, balance) {
+	return new Promise((resolve, reject) => {
+		connection.query(
+			`UPDATE accounts SET balance = ? WHERE id = ?`,
+			[balance, id],
+			(error, result) => {
+				if (error) {
+					reject(new Error(error));
+				}
+				resolve(result);
+			}
+		);
+	});
+}
+
 // +-------------------------------+
 // |             Cards             |
 // +-------------------------------+
@@ -98,10 +158,11 @@ function getUserAccounts(connection, id) {
 function getUserCards(connection, id) {
 	return new Promise((resolve, reject) => {
 		connection.query(
-			`SELECT cards.* 
+			`SELECT cards.*, accounts.name AS account_name
 			 FROM cards 
 			 JOIN accounts ON cards.account_id = accounts.id
-			 WHERE client_id = ?`,
+			 JOIN users ON accounts.client_id = users.id
+			 WHERE users.id = ?`,
 			[id],
 			(error, result) => {
 				if (error) {
@@ -113,6 +174,74 @@ function getUserCards(connection, id) {
 	});
 }
 
+function addCard(connection, account_id, number, expiration, cvc) {
+	return new Promise((resolve, reject) => {
+		connection.query(
+			`INSERT INTO cards (account_id, number, expiration, cvc) VALUES (?, ?, ?, ?)`,
+			[account_id, number, expiration, cvc],
+			(error, result) => {
+				if (error) {
+					reject(new Error(error));
+				}
+				resolve(result);
+			}
+		);
+	});
+}
+
+function removeCard(connection, id) {
+	return new Promise((resolve, reject) => {
+		connection.query(
+			`DELETE FROM cards WHERE id = ?`,
+			[id],
+			(error, result) => {
+				if (error) {
+					reject(new Error(error));
+				}
+				resolve(result);
+			}
+		);
+	});
+}
+
+// +-------------------------------+
+// |          Transfers            |
+// +-------------------------------+
+
+function getUserTransfers(connection, id) {
+	return new Promise((resolve, reject) => {
+		connection.query(
+			`SELECT * 
+			 FROM transfers
+			 JOIN accounts as sender ON transfers.account_from_id = sender.id
+			 JOIN accounts as receiver ON transfers.account_to_id = receiver.id
+			 WHERE sender.client_id = ? OR receiver.client_id = ?`,
+			[id, id],
+			(error, result) => {
+				if (error) {
+					reject(new Error(error));
+				}
+				resolve(result);
+			}
+		);
+	});
+}
+
+function addTransfer(connection, account_from_id, account_to_id, name, amount) {
+	return new Promise((resolve, reject) => {
+		connection.query(
+			`INSERT INTO transfers (account_from_id, account_to_id, name, value) VALUES (?, ?, ?, ?)`,
+			[account_from_id, account_to_id, name, amount],
+			(error, result) => {
+				if (error) {
+					reject(new Error(error));
+				}
+				resolve(result);
+			}
+		);
+	});
+}
+
 module.exports = {
 	getConnection,
 
@@ -122,6 +251,15 @@ module.exports = {
 	getUserByEmail,
 
 	getUserAccounts,
+	getAccount,
+	addAccount,
+	removeAccount,
+	setAccountBalance,
 
 	getUserCards,
+	addCard,
+	removeCard,
+
+	getUserTransfers,
+	addTransfer,
 };

front/src/components/TopBar.tsx

@@ -0,0 +1,67 @@
+import { useState } from "react"
+import { Link } from "react-router-dom"
+import { User } from "../types"
+
+export default function TopBar({ user }: { user: User | undefined }) {
+    const [burgerMenuOpen, setBurgerMenuOpen] = useState(false)
+
+    return (
+        <div className="bank-section topbar">
+            <div className="topbar-left">
+                <Link to="/">Home</Link>
+                {user?.admin == 1 && (
+                    <Link to="/admin">Admin</Link>
+                )}
+            </div>
+            <div className="topbar-center">
+                <h1>Tanuki's Bank</h1>
+            </div>
+            {user ? (
+                <div className="topbar-right">
+                    <span>{user.name}</span>
+                    <button onClick={() => {
+                        localStorage.removeItem("token")
+                        window.location.reload()
+                    }}>
+                        Logout
+                    </button>
+                </div>
+            ) : (
+                <div className="topbar-right">
+                    <Link to="/login">Login</Link>
+                    <Link to="/register">Register</Link>
+                </div>
+            )}
+            <div className="burger-menu">
+                {burgerMenuOpen && (
+                    <div className="burger-menu-content">
+                        <Link to="/">Home</Link>
+                        {user?.admin == 1 && (
+                            <Link to="/admin">Admin</Link>
+                        )}
+                        {user ? (
+                            <div className="burger-menu-user">
+                                <span>{user.name}</span>
+                                <button onClick={() => {
+                                    localStorage.removeItem("token")
+                                    window.location.reload()
+                                }}>
+                                    Logout
+                                </button>
+                            </div>
+                        ) : (
+                            <div className="burger-menu-user">
+                                <Link to="/login">Login</Link>
+                                <Link to="/register">Register</Link>
+                            </div>
+                        )}
+                    </div>
+                )}
+                <button onClick={() => setBurgerMenuOpen(!burgerMenuOpen)}>
+                    {burgerMenuOpen ? "Close" : "Menu"}
+                </button>
+            </div>
+            
+        </div>
+    )
+}

front/src/index.css

@@ -0,0 +1,82 @@
+html {
+    background: #2a6c9b;
+    background: linear-gradient(167deg, rgba(42, 108, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(163, 237, 83, 1) 100%);
+}
+
+.bank-page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    gap: 10px;
+}
+
+.bank-section {
+    width: 97%;
+    display: flex;
+    flex-direction: column;
+    border: 0.5px solid #000;
+    padding: 10px;
+    background: #fcf2b5;
+}
+
+.topbar {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.topbar-left {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}
+
+.topbar-right {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}
+
+.burger-menu {
+    display: none;
+}
+
+.burger-menu-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+.burger-menu-user {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+@media (max-width: 780px) {
+    .topbar {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .topbar-left {
+        display: none;
+    }
+
+    .topbar-right {
+        display: none;
+    }
+
+    .burger-menu {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+    }
+}

front/src/main.tsx

@@ -6,7 +6,7 @@ import Home from './pages/Home'
 import Login from './pages/Login'
 import Register from './pages/Register'
 import Admin from './pages/Admin'
-import AddUser from './pages/AddUser'
+import UserPage from './pages/UserPage'
 
 createRoot(document.getElementById('root')!).render(
   <BrowserRouter>
@@ -15,7 +15,7 @@ createRoot(document.getElementById('root')!).render(
       <Route path="/login" element={<Login />} />
       <Route path="/register" element={<Register />} />
       <Route path="/admin" element={<Admin />} />
-      <Route path="/admin/adduser" element={<AddUser />} />
+      <Route path="/admin/user/:id" element={<UserPage />} />
     </Routes>
   </BrowserRouter>,
 )

front/src/pages/AddUser.tsx

@@ -1,59 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
-
-export default function AddUser () {
-    const navigate = useNavigate();
-    const [token, setToken] = useState<string>("");
-    const [name, setName] = useState<string>("");
-    const [lastname, setLastname] = useState<string>("");
-    const [email, setEmail] = useState<string>("");
-    const [numero, setNumero] = useState<string>("");
-    const [password, setPassword] = useState<string>("");
-
-    useEffect(() => {
-        const storedToken = localStorage.getItem("token");
-        if (storedToken) {
-            setToken(storedToken);
-        } else {
-            navigate("/login");
-        }
-    }, []);
-
-    function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-        e.preventDefault();
-        if (name === "" || lastname === "" || email === "" || numero === "" || password === "") {
-            alert("Please fill in all fields");
-            return;
-        }
-        axios
-            .post("/api/users/add", {
-                token,
-                name,
-                lastname,
-                email,
-                numero,
-                password
-            })
-            .then(() => {
-                navigate("/admin");
-            })
-            .catch((error) => {
-                console.log(error.response.data);
-            });
-    }
-
-    return (
-        <div>
-            <h1>Add User</h1>
-            <form onSubmit={handleSubmit}>
-                <input type="text" id="name" name="name" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
-                <input type="text" id="lastname" name="lastname" placeholder="Lastname" value={lastname} onChange={(e) => setLastname(e.target.value)} />
-                <input type="text" id="email" name="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
-                <input type="text" id="numero" name="numero" placeholder="Numero" value={numero} onChange={(e) => setNumero(e.target.value)} />
-                <input type="password" id="password" name="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
-                <button type="submit">Add User</button>
-            </form>
-        </div>
-    )
-}

front/src/pages/Admin.tsx

@@ -1,14 +1,77 @@
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import axios from 'axios'
+import { User, Users } from '../types';
+
+import TopBar from '../components/TopBar';
 
 export default function Admin () {
+    const navigate = useNavigate();
+    const [user, setUser] = useState<User>();
+    const [users, setUsers] = useState<Users>([]);
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (!token) {
+            navigate('/login');
+        } else {
+            axios
+                .post('/api/@me', {
+                    token: token
+                })
+                .then((response) => {
+                    setUser(response.data);
+                })
+                .catch(() => {
+                    navigate('/login');
+                });
+
+            axios
+                .post('/api/users', {
+                    token: token
+                })
+                .then((response) => {
+                    setUsers(response.data);
+                })
+                .catch((error) => {
+                    console.error('Error fetching users:', error.response.data);
+                });
+        }
+    }, []);
+
+    if (!user) {
+        return (
+            <div className='bank-page'>
+                <TopBar user={user} />
+                <div className='bank-section'>
+                    <h1>Loading...</h1>
+                </div>
+            </div>
+        );
+    }
+
     return (
-        <div>
+        <div className='bank-page'>
-            <h1>Admin</h1>
+            <TopBar user={user} />
-            <p>Welcome Admin</p>
+            <div className='bank-section'>
-            <div>
                 <h2>Admin Panel</h2>
                 <p>Manage users, accounts, and cards.</p>
             </div>
+            <div className='bank-section'>
+                <h2>Users</h2>
+                {users.length > 0 ? (
+                    users.map((user) => (
+                        <div key={user.id}>
+                            <p>
+                                <strong>{user.name}</strong> - {user.lastname}
+                            </p>
+                            <Link to={`/admin/user/${user.id}`}>View Details</Link>
+                        </div>
+                    ))
+                ) : (
+                    <p>No users found.</p>
+                )}
+            </div>
         </div>
     );
 }

front/src/pages/Home.tsx

@@ -1,19 +1,54 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { User, Accounts, Cards } from '../types';
+import { User, Accounts, Cards, Transfers } from '../types';
 import axios from 'axios';
 
+import TopBar from '../components/TopBar';
+
 export default function Home () {
     const navigate = useNavigate();
-    const [token, setToken] = useState<string>("");
     const [user, setUser] = useState<User>();
+    const [transfers, setTransfers] = useState<Transfers>([]);
     const [accounts, setAccounts] = useState<Accounts>([]);
     const [cards, setCards] = useState<Cards>([]);
+    const [accountId, setAccountId] = useState<number>(0);
+    const [accountToId, setAccountToId] = useState<number>(0);
+    const [amount, setAmount] = useState<number>(0);
+    const [message, setMessage] = useState<string>("");
+    const token = localStorage.getItem("token");
+
+    function sendMoney (e: React.FormEvent) {
+        e.preventDefault();
+        
+        axios
+            .post("/api/@me/send-money", {
+                token: token,
+                account_from_id: accountId,
+                account_to_id: accountToId,
+                amount: amount,
+                name: message
+            })
+            .then(() => {
+                axios
+                    .post("/api/@me/accounts", { token: token })
+                    .then((response) => {
+                        setAccounts(response.data);
+                        if (response.data.length > 0) {
+                            setAccountId(response.data[0].id);
+                        }
+                    })
+                    .catch(() => {
+                        console.error("Failed to fetch accounts");
+                    });
+                })
+                .catch((error) => {
+                    console.error("Failed to send money", error.response.data);
+                });
+    }
 
     useEffect(() => {
         const storedToken = localStorage.getItem("token");
         if (storedToken) {
-            setToken(storedToken);
             axios
                 .post("/api/@me", { token: storedToken })
                 .then((response) => {
@@ -23,10 +58,22 @@ export default function Home () {
                     navigate("/login");
                 });
 
+            axios
+                .post("/api/@me/transfers", { token: storedToken })
+                .then((response) => {
+                    setTransfers(response.data);
+                })
+                .catch(() => {
+                    console.error("Failed to fetch transfers");
+                });
+
             axios
                 .post("/api/@me/accounts", { token: storedToken })
                 .then((response) => {
                     setAccounts(response.data);
+                    if (response.data.length > 0) {
+                        setAccountId(response.data[0].id);
+                    }
                 })
                 .catch(() => {
                     console.error("Failed to fetch accounts");
@@ -40,22 +87,62 @@ export default function Home () {
                 .catch(() => {
                     console.error("Failed to fetch cards");
                 });
+        } else {
+            navigate("/login");
         }
     }, []);
 
     if (!user) {
         return (
-            <div>
+            <div className='bank-page'>
-                <h1>Loading...</h1>
+                <TopBar user={user} />
+                <div className='bank-section'>
+                    <h1>Loading...</h1>
+                </div>
             </div>
         );
     }
 
     return (
-        <div>
+        <div className='bank-page'>
-            <h1>Home</h1>
+            <TopBar user={user} />
-            <p>Welcome {user.name} {user.lastname}</p>
+            <div className='bank-section'>
-            <div>
+                <h1>Home</h1>
+                <p>Welcome {user.name} {user.lastname}</p>
+            </div>
+            <div className='bank-section'>
+                <h2>Your Transfers</h2>
+                {transfers.length > 0 ? (
+                    <ul>
+                        {transfers.map((transfer) => (
+                            <li key={transfer.id}>
+                                Transfer ID: {transfer.id}, Amount: {transfer.value}
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    <p>No transfers found.</p>
+                )}
+            </div>
+            {accounts.length > 0 && (
+                <div className='bank-section'>
+                    <h2>Send money</h2>
+                    <form onSubmit={sendMoney}>
+                        <select name="" id="" value={String(accountId)} onChange={(e) => setAccountId(Number(e.target.value))}>
+                            {accounts.map((account: any) => (
+                                <option key={account.id} value={account.id}>
+                                    {account.name}
+                                </option>
+                            ))}
+                        </select>
+                        <input type="number" placeholder="Amount" onChange={(e) => setAmount(Number(e.target.value))} value={amount}/>
+                        <input type="text" placeholder="Recipient Account ID" onChange={(e) => setAccountToId(Number(e.target.value))} value={accountToId}/>
+                        <input type="text" placeholder="Message" onChange={(e) => setMessage(e.target.value)} value={message}/>
+                        <button type="submit">Send</button>
+                    </form>
+                </div>
+            )}
+            <div className='bank-section'>
                 <h2>Your Accounts</h2>
                 {accounts.length > 0 ? (
                     <ul>
@@ -69,7 +156,7 @@ export default function Home () {
                     <p>No accounts found.</p>
                 )}
             </div>
-            <div>
+            <div className='bank-section'>
                 <h2>Your Cards</h2>
                 {cards.length > 0 ? (
                     <ul>

front/src/pages/Login.tsx

@@ -2,6 +2,8 @@ import axios from "axios"
 import { useState } from "react"
 import { useNavigate } from "react-router-dom"
 
+import TopBar from "../components/TopBar"
+
 export default function Login () {
     const navigate = useNavigate()
     const [email, setEmail] = useState("")
@@ -29,13 +31,16 @@ export default function Login () {
     }
 
     return (
-        <div>
+        <div className="bank-page">
-        <h1>Login</h1>
+            <TopBar user={undefined} />
-        <form onSubmit={handleSubmit}>
+            <div className="bank-section">
-            <input type="text" id="username" name="username" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
+                <h1>Login</h1>
-            <input type="password" id="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
+                <form onSubmit={handleSubmit}>
-            <button type="submit" >Login</button>
+                    <input type="text" id="username" name="username" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
-        </form>
+                    <input type="password" id="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
+                    <button type="submit" >Login</button>
+                </form>
+            </div>
         </div>
     )
 }

front/src/pages/Register.tsx

@@ -1,7 +1,9 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 
+import TopBar from '../components/TopBar';
+
 export default function Register () {
     const navigate = useNavigate();
     const [name, setName] = useState<string>("");
@@ -44,16 +46,19 @@ export default function Register () {
     }
 
     return (
-        <div>
+        <div className='bank-page'>
-            <h1>Add User</h1>
+            <TopBar user={undefined} />
-            <form onSubmit={handleSubmit}>
+            <div className='bank-section'>
-                <input type="text" id="name" name="name" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
+                <h1>Register</h1>
-                <input type="text" id="lastname" name="lastname" placeholder="Lastname" value={lastname} onChange={(e) => setLastname(e.target.value)} />
+                <form onSubmit={handleSubmit}>
-                <input type="text" id="email" name="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+                    <input type="text" id="name" name="name" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
-                <input type="text" id="numero" name="numero" placeholder="Numero" value={numero} onChange={(e) => setNumero(e.target.value)} />
+                    <input type="text" id="lastname" name="lastname" placeholder="Lastname" value={lastname} onChange={(e) => setLastname(e.target.value)} />
-                <input type="password" id="password" name="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
+                    <input type="text" id="email" name="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
-                <button type="submit">Add User</button>
+                    <input type="text" id="numero" name="numero" placeholder="Numero" value={numero} onChange={(e) => setNumero(e.target.value)} />
-            </form>
+                    <input type="password" id="password" name="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
+                    <button type="submit">Register</button>
+                </form>
+            </div>
         </div>
     )
 }

front/src/pages/UserPage.tsx

@@ -0,0 +1,261 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import { User } from '../types';
+
+import TopBar from '../components/TopBar';
+
+export default function UserPage() {
+    const navigate = useNavigate();
+    const [user, setUser] = useState<User>();
+    const [thisUser, setThisUser] = useState<User>();
+    const [accounts, setAccounts] = useState([]);
+    const [cards, setCards] = useState([]);
+    const [name, setName] = useState('');
+    const [balance, setBalance] = useState(0);
+    const [accountId, setAccountId] = useState<Number>();
+    const token = localStorage.getItem('token');
+    const { id } = useParams();
+
+    function handleSubmit(event: React.FormEvent) {
+        event.preventDefault();
+
+        axios
+            .post(`/api/users/${id}/create-account`, { token: token, name: name })
+            .then(() => {
+                axios
+                    .post(`/api/users/${id}/accounts`, { token: token })
+                    .then((response) => {
+                        setAccounts(response.data);
+                        setName('');
+                        setAccountId(response.data[0]?.id);
+                    })
+                    .catch((error) => {
+                        console.error('Error fetching user:', error.response.data);
+                    });
+            })
+            .catch((error) => {
+                console.error('Error creating account:', error.response.data);
+            });
+    }
+
+    function deleteAccount(accountId: number) {
+        if (!window.confirm('Are you sure you want to delete this account?')) {
+            return;
+        }
+        axios
+            .post(`/api/users/${id}/accounts/${accountId}/delete`, { token: token })
+            .then(() => {
+                axios
+                    .post(`/api/users/${id}/accounts`, { token: token })
+                    .then((response) => {
+                        setAccounts(response.data);
+                        setName('');
+                        setAccountId(response.data[0]?.id);
+                    })
+                    .catch((error) => {
+                        console.error('Error fetching user:', error.response.data);
+                    });
+            })
+            .catch((error) => {
+                console.error('Error deleting account:', error.response.data);
+            });
+    }
+
+    function addCard(event: React.FormEvent) {
+        event.preventDefault();
+
+        axios
+            .post(`/api/users/${id}/create-card`, { token: token, account_id: accountId })
+            .then(() => {
+                axios
+                    .post(`/api/users/${id}/cards`, { token: token })
+                    .then((response) => {
+                        setCards(response.data);
+                    })
+                    .catch((error) => {
+                        console.error('Error fetching user:', error.response.data);
+                    });
+            })
+            .catch((error) => {
+                console.error('Error creating account:', error.response.data);
+            });
+    }
+
+    function deleteCard(cardId: number) {
+        if (!window.confirm('Are you sure you want to delete this card?')) {
+            return;
+        }
+        axios
+            .post(`/api/users/${id}/cards/${cardId}/delete`, { token: token })
+            .then(() => {
+                axios
+                    .post(`/api/users/${id}/cards`, { token: token })
+                    .then((response) => {
+                        setCards(response.data);
+                    })
+                    .catch((error) => {
+                        console.error('Error fetching user:', error.response.data);
+                    });
+            })
+            .catch((error) => {
+                console.error('Error deleting account:', error.response.data);
+            });
+    }
+
+    function addBalance(event: React.FormEvent) {
+        event.preventDefault();
+
+        axios
+            .post(`/api/users/${id}/accounts/${accountId}/add-balance`, { token: token, balance: balance })
+            .then(() => {
+                axios
+                    .post(`/api/users/${id}/accounts`, { token: token })
+                    .then((response) => {
+                        setAccounts(response.data);
+                        setBalance(0);
+                        setAccountId(response.data[0]?.id);
+                    })
+                    .catch((error) => {
+                        console.error('Error fetching user:', error.response.data);
+                    });
+            })
+            .catch((error) => {
+                console.error('Error creating account:', error.response.data);
+            });
+    }
+
+    useEffect(() => {
+        if (token) {
+            axios
+                .post('/api/@me', { token: token })
+                .then((response) => {
+                    setThisUser(response.data);
+                })
+                .catch((error) => {
+                    console.error('Error fetching user:', error.response.data);
+                });
+
+            axios
+                .post(`/api/users/${id}`, { token: token })
+                .then((response) => {
+                    setUser(response.data);
+                })
+                .catch((error) => {
+                    console.error('Error fetching user:', error.response.data);
+                });
+
+            axios
+                .post(`/api/users/${id}/accounts`, { token: token })
+                .then((response) => {
+                    setAccounts(response.data);
+                    setAccountId(response.data[0]?.id);
+                })
+                .catch((error) => {
+                    console.error('Error fetching user:', error.response.data);
+                });
+
+            axios
+                .post(`/api/users/${id}/cards`, { token: token })
+                .then((response) => {
+                    setCards(response.data);
+                })
+                .catch((error) => {
+                    console.error('Error fetching cards:', error.response.data);
+                });
+        } else {
+            navigate('/login');
+        }
+    }, [token]);
+
+    if (!user || !thisUser) {
+        return (
+            <div className='bank-page'>
+                <TopBar user={thisUser} />
+                <div className='bank-section'>
+                    <h1>Loading...</h1>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className='bank-page'>
+            <TopBar user={thisUser} />
+            <div className='bank-section'>
+            <h2>{user.name} {user.lastname}</h2>
+                <p><strong>Email:</strong> {user.email}</p>
+                <p><strong>Phone Number:</strong> {user.numero}</p>
+                <p><strong>Admin:</strong> {user.admin === 1 ? 'Yes' : 'No'}</p>
+            </div>
+            <div className='bank-section'>
+                <h2>User Accounts</h2>
+                {accounts.length > 0 ? (
+                    accounts.map((account: any) => (
+                        <div key={account.id}>
+                            <p>
+                            <strong>Name:</strong> {account.name} - <strong>Balance:</strong> {account.balance} - <strong>Interest:</strong> {account.interest}
+                            </p>
+                            <button onClick={() => deleteAccount(account.id)}>Delete account</button>
+                        </div>
+                    ))
+                ) : (
+                    <p>No accounts found.</p>
+                )}
+            </div>
+            {accounts.length > 0 && (
+                <div className='bank-section'>
+                    <h2>Add balance</h2>
+                    <form onSubmit={addBalance}>
+                        <select name="" id="" value={String(accountId)} onChange={(e) => setAccountId(Number(e.target.value))}>
+                            {accounts.map((account: any) => (
+                                <option key={account.id} value={account.id}>
+                                    {account.name}
+                                </option>
+                            ))}
+                        </select>
+                        <input type="number" placeholder='Balance' id='balance' onChange={(e) => setBalance(Number(e.target.value))} value={balance} />
+                        <button type='submit'>Add balance</button>
+                    </form>
+                </div>
+            )}
+            <div className='bank-section'>
+                <h2>Create Account</h2>
+                <form onSubmit={handleSubmit}>
+                    <input type="text" placeholder='Account name' id='name' onChange={(e) => setName(e.target.value)} value={name} />
+                    <button type="submit">Create account</button>
+                </form>
+            </div>
+            <div className='bank-section'>
+                <h2>User Cards</h2>
+                {cards.length > 0 ? (
+                    cards.map((card: any) => (
+                        <div key={card.id}>
+                            <p>
+                            <strong>Card Account:</strong> {card.account_name} - <strong>Card Number:</strong> {card.number} - <strong>Expiration:</strong> {card.expiration} - <strong>CVC:</strong> {card.cvc}
+                            </p>
+                            <button onClick={() => deleteCard(card.id)}>Delete card</button>
+                        </div>
+                    ))
+                ) : (
+                    <p>No cards found.</p>
+                )}
+            </div>
+            {accounts.length > 0 && (
+                <div className='bank-section'>
+                    <h2>Add card</h2>
+                    <form onSubmit={addCard}>
+                        <select name="" id="" value={String(accountId)} onChange={(e) => setAccountId(Number(e.target.value))}>
+                            {accounts.map((account: any) => (
+                                <option key={account.id} value={account.id}>
+                                    {account.name}
+                                </option>
+                            ))}
+                        </select>
+                        <button type='submit'>Add card</button>
+                    </form>
+                </div>
+            )}
+        </div>
+    );
+}

front/src/types.ts

@@ -2,9 +2,24 @@ export type User = {
     id: number;
     name: string;
     lastname: string;
+    email: string;
+    numero: string;
+    password: string;
     admin: number;
 }
 
+export type Users = User[];
+
+export type Transfer = {
+    id: number;
+    account_from_id: number;
+    account_to_id: number;
+    name: string;
+    value: number;
+}
+
+export type Transfers = Transfer[];
+
 export type Account = {
     id: number;
     balance: number;