add: added routes and improved frontend

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>
-            <h1>Admin</h1>
-            <p>Welcome Admin</p>
-            <div>
+        <div className='bank-page'>
+            <TopBar user={user} />
+            <div className='bank-section'>
                 <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>
-                <h1>Loading...</h1>
+            <div className='bank-page'>
+                <TopBar user={user} />
+                <div className='bank-section'>
+                    <h1>Loading...</h1>
+                </div>
             </div>
         );
     }
 
     return (
-        <div>
-            <h1>Home</h1>
-            <p>Welcome {user.name} {user.lastname}</p>
-            <div>
+        <div className='bank-page'>
+            <TopBar user={user} />
+            <div className='bank-section'>
+                <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>
-        <h1>Login</h1>
-        <form onSubmit={handleSubmit}>
-            <input type="text" id="username" name="username" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
-            <input type="password" id="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
-            <button type="submit" >Login</button>
-        </form>
+        <div className="bank-page">
+            <TopBar user={undefined} />
+            <div className="bank-section">
+                <h1>Login</h1>
+                <form onSubmit={handleSubmit}>
+                    <input type="text" id="username" name="username" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
+                    <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>
-            <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 className='bank-page'>
+            <TopBar user={undefined} />
+            <div className='bank-section'>
+                <h1>Register</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">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;