mirror of
https://github.com/dat515-2025/Group-8.git
synced 2026-03-22 23:20:56 +01:00
feat(frontend): introduced a working frontend prototype
This commit is contained in:
ribardej
155
7project/frontend/src/pages/Dashboard.tsx
Normal file
155
7project/frontend/src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { type Category, type Transaction, createTransaction, getCategories, getTransactions } from '../api';
|
||||
|
||||
function formatAmount(n: number) {
|
||||
return new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(n);
|
||||
}
|
||||
|
||||
export default function Dashboard({ onLogout }: { onLogout: () => void }) {
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// New transaction form state
|
||||
const [amount, setAmount] = useState<string>('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<number | ''>('');
|
||||
|
||||
// Filters
|
||||
const [minAmount, setMinAmount] = useState<string>('');
|
||||
const [maxAmount, setMaxAmount] = useState<string>('');
|
||||
const [filterCategoryId, setFilterCategoryId] = useState<number | ''>('');
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
async function loadAll() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const [txs, cats] = await Promise.all([getTransactions(), getCategories()]);
|
||||
setTransactions(txs);
|
||||
setCategories(cats);
|
||||
} catch (err: any) {
|
||||
setError(err?.message || 'Failed to load data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadAll();
|
||||
}, []);
|
||||
|
||||
const last10 = useMemo(() => {
|
||||
const sorted = [...transactions].sort((a, b) => b.id - a.id);
|
||||
return sorted.slice(0, 10);
|
||||
}, [transactions]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
let arr = last10;
|
||||
const min = minAmount !== '' ? Number(minAmount) : undefined;
|
||||
const max = maxAmount !== '' ? Number(maxAmount) : undefined;
|
||||
if (min !== undefined) arr = arr.filter(t => t.amount >= min);
|
||||
if (max !== undefined) arr = arr.filter(t => t.amount <= max);
|
||||
if (filterCategoryId !== '') arr = arr.filter(t => t.category_ids.includes(filterCategoryId as number));
|
||||
if (searchText.trim()) arr = arr.filter(t => (t.description || '').toLowerCase().includes(searchText.toLowerCase()));
|
||||
return arr;
|
||||
}, [last10, minAmount, maxAmount, filterCategoryId, searchText]);
|
||||
|
||||
function categoryNameById(id: number) {
|
||||
return categories.find(c => c.id === id)?.name || `#${id}`;
|
||||
}
|
||||
|
||||
async function handleCreate(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!amount) return;
|
||||
const payload = {
|
||||
amount: Number(amount),
|
||||
description: description || undefined,
|
||||
category_ids: selectedCategoryId !== '' ? [Number(selectedCategoryId)] : undefined,
|
||||
};
|
||||
try {
|
||||
const created = await createTransaction(payload);
|
||||
setTransactions(prev => [created, ...prev]);
|
||||
// reset form
|
||||
setAmount('');
|
||||
setDescription('');
|
||||
setSelectedCategoryId('');
|
||||
} catch (err: any) {
|
||||
alert(err?.message || 'Failed to create transaction');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 900, margin: '2rem auto', padding: 16 }}>
|
||||
<header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
|
||||
<h2 style={{ margin: 0 }}>Dashboard</h2>
|
||||
<button onClick={onLogout}>Logout</button>
|
||||
</header>
|
||||
|
||||
<section style={{ border: '1px solid #eee', padding: 12, borderRadius: 8, marginBottom: 16 }}>
|
||||
<h3 style={{ marginTop: 0 }}>Add Transaction</h3>
|
||||
<form onSubmit={handleCreate} style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||||
<input type="number" step="0.01" placeholder="Amount" value={amount} onChange={(e) => setAmount(e.target.value)} required />
|
||||
<input type="text" placeholder="Description (optional)" value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
<select value={selectedCategoryId} onChange={(e) => setSelectedCategoryId(e.target.value ? Number(e.target.value) : '')}>
|
||||
<option value="">No category</option>
|
||||
{categories.map(c => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<button type="submit">Add</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section style={{ border: '1px solid #eee', padding: 12, borderRadius: 8, marginBottom: 16 }}>
|
||||
<h3 style={{ marginTop: 0 }}>Filters</h3>
|
||||
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||||
<input type="number" step="0.01" placeholder="Min amount" value={minAmount} onChange={(e) => setMinAmount(e.target.value)} />
|
||||
<input type="number" step="0.01" placeholder="Max amount" value={maxAmount} onChange={(e) => setMaxAmount(e.target.value)} />
|
||||
<select value={filterCategoryId} onChange={(e) => setFilterCategoryId(e.target.value ? Number(e.target.value) : '')}>
|
||||
<option value="">All categories</option>
|
||||
{categories.map(c => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<input type="text" placeholder="Search in description" value={searchText} onChange={(e) => setSearchText(e.target.value)} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style={{ border: '1px solid #eee', padding: 12, borderRadius: 8 }}>
|
||||
<h3 style={{ marginTop: 0 }}>Latest Transactions (last 10)</h3>
|
||||
{loading ? (
|
||||
<div>Loading…</div>
|
||||
) : error ? (
|
||||
<div style={{ color: 'crimson' }}>{error}</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div>No transactions</div>
|
||||
) : (
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ textAlign: 'left', borderBottom: '1px solid #ddd' }}>ID</th>
|
||||
<th style={{ textAlign: 'right', borderBottom: '1px solid #ddd' }}>Amount</th>
|
||||
<th style={{ textAlign: 'left', borderBottom: '1px solid #ddd' }}>Description</th>
|
||||
<th style={{ textAlign: 'left', borderBottom: '1px solid #ddd' }}>Categories</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtered.map(t => (
|
||||
<tr key={t.id}>
|
||||
<td style={{ padding: '6px 4px' }}>{t.id}</td>
|
||||
<td style={{ padding: '6px 4px', textAlign: 'right' }}>{formatAmount(t.amount)}</td>
|
||||
<td style={{ padding: '6px 4px' }}>{t.description || ''}</td>
|
||||
<td style={{ padding: '6px 4px' }}>
|
||||
{t.category_ids.map(id => categoryNameById(id)).join(', ')}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
71
7project/frontend/src/pages/LoginRegisterPage.tsx
Normal file
71
7project/frontend/src/pages/LoginRegisterPage.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { useState } from 'react';
|
||||
import { login, register } from '../api';
|
||||
|
||||
export default function LoginRegisterPage({ onLoggedIn }: { onLoggedIn: () => void }) {
|
||||
const [mode, setMode] = useState<'login' | 'register'>('login');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (mode === 'login') {
|
||||
await login(email, password);
|
||||
onLoggedIn();
|
||||
} else {
|
||||
await register(email, password, firstName || undefined, lastName || undefined);
|
||||
// After register, prompt login automatically
|
||||
await login(email, password);
|
||||
onLoggedIn();
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err?.message || 'Operation failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 420, margin: '4rem auto', padding: 24, border: '1px solid #ddd', borderRadius: 8 }}>
|
||||
<h2 style={{ marginTop: 0 }}>{mode === 'login' ? 'Login' : 'Register'}</h2>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<button onClick={() => setMode('login')} disabled={mode === 'login'}>Login</button>
|
||||
<button onClick={() => setMode('register')} disabled={mode === 'register'} style={{ marginLeft: 8 }}>Register</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label>Email<br />
|
||||
<input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} style={{ width: '100%' }} />
|
||||
</label>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label>Password<br />
|
||||
<input type="password" required value={password} onChange={(e) => setPassword(e.target.value)} style={{ width: '100%' }} />
|
||||
</label>
|
||||
</div>
|
||||
{mode === 'register' && (
|
||||
<>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label>First name (optional)<br />
|
||||
<input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} style={{ width: '100%' }} />
|
||||
</label>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label>Last name (optional)<br />
|
||||
<input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} style={{ width: '100%' }} />
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{error && <div style={{ color: 'crimson', marginBottom: 12 }}>{error}</div>}
|
||||
<button type="submit" disabled={loading}>{loading ? 'Please wait…' : (mode === 'login' ? 'Login' : 'Register')}</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user