lukas/uis-cloud-computing
1
0
Fork 0
mirror of https://github.com/dat515-2025/Group-8.git synced 2026-03-22 23:20:56 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(frontend): improved UI

Browse Source
This commit is contained in:
ribardej
2025-10-23 09:22:10 +02:00
parent 82eb34c6e6
commit 5ecfc62b02
5 changed files with 60 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
7project/frontend/src/pages/Dashboard.tsx
View File

@@ -181,7 +181,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
<section className="card">
<h3>Bank connections</h3>
<p className="muted">Connect your CSAS (George) account.</p>
<button className="btn" onClick={startOauthCsas}>Connect CSAS (George)</button>
<button className="btn primary" onClick={startOauthCsas}>Connect CSAS (George)</button>
</section>
<section className="card">
@@ -203,7 +203,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
<form className="form-row" onSubmit={async (e) => { e.preventDefault(); if (!newCatName.trim()) return; try { const cat = await createCategory({ name: newCatName.trim(), description: newCatDesc || undefined }); setCategories(prev => [...prev, cat]); setNewCatName(''); setNewCatDesc(''); } catch (err: any) { alert(err?.message || 'Failed to create category'); } }}>
<input className="input" type="text" placeholder="New category name" value={newCatName} onChange={(e) => setNewCatName(e.target.value)} />
<input className="input" type="text" placeholder="Description (optional)" value={newCatDesc} onChange={(e) => setNewCatDesc(e.target.value)} />
<button className="btn" type="submit">Create category</button>
<button className="btn primary" type="submit">Create category</button>
</form>
</section>
@@ -255,12 +255,14 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
<div>No transactions</div>
) : (
<>
<div className="form-row" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
<div className="space-x">
<button className="btn" disabled={page <= 0} onClick={() => setPage(p => Math.max(0, p - 1))}>&lt;- Load recent</button>
<button className="btn" disabled={page >= totalPages - 1} onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}>Load older -&gt;</button>
<div className="table-controls">
<div className="muted">
Showing {visible.length} of {filtered.length} (page {Math.min(page + 1, Math.max(1, totalPages))}/{Math.max(1, totalPages)})
</div>
<div className="actions">
<button className="btn primary" disabled={page <= 0} onClick={() => setPage(p => Math.max(0, p - 1))}>Previous</button>
<button className="btn primary" disabled={page >= totalPages - 1} onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}>Next</button>
</div>
<div className="muted">Showing {visible.length} of {filtered.length} (page {Math.min(page + 1, Math.max(1, totalPages))}/{Math.max(1, totalPages)})</div>
</div>
<table className="table">
<thead>
@@ -290,13 +292,13 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
<option key={c.id} value={c.id}>{c.name}</option>
))}
</select>
<button className="btn" onClick={saveEditCategories}>Save</button>
<button className="btn" onClick={cancelEditCategories}>Cancel</button>
<button className="btn small" onClick={saveEditCategories}>Save</button>
<button className="btn small" onClick={cancelEditCategories}>Cancel</button>
</div>
) : (
<div className="space-x" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<div className="space-x" style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between' }}>
<span>{t.category_ids.map(id => categoryNameById(id)).join(', ') || '—'}</span>
<button className="btn" onClick={() => beginEditCategories(t)}>Change</button>
<button className="btn small" onClick={() => beginEditCategories(t)}>Change</button>
</div>
)}
</td>