1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
import React, { useEffect, useState } from 'react';
import { Table, Typography, Spin, Message, Card } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';
import API_BASE_URL from './config';
const columns = [
{
title: 'Timestamp',
dataIndex: 'timestamp',
render: (val) => new Date(val).toLocaleString(),
},
{
title: 'Quantity (MW)',
dataIndex: 'quantity',
render: (val) => val.toFixed(2),
},
{
title: 'Price ($/MWh)',
dataIndex: 'price',
render: (val) => `$${val.toFixed(2)}`,
},
{
title: 'Status',
dataIndex: 'status',
render: (val) => {
let color = 'gray';
if (val === 'Success') color = 'green';
else if (val === 'Fail') color = 'red';
else if (val === 'Submitted') color = 'blue';
return <Typography.Text style={{ color }}>{val}</Typography.Text>;
}
},
{
title: 'PnL',
dataIndex: 'pnl',
render: (val) => {
if (val === null) return 'N/A';
const color = val >= 0 ? 'green' : 'red';
return <Typography.Text style={{ color }}>{val.toFixed(2)}</Typography.Text>;
}
}
];
function BidsPage() {
const [bids, setBids] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(`${API_BASE_URL}/bids/`)
.then((res) => {
if (!res.ok) throw new Error('Failed to fetch bids');
return res.json();
})
.then((json) => setBids(json))
.catch((err) => {
console.error(err);
Message.error('Failed to load bids.');
})
.finally(() => setLoading(false));
}, []);
return (
<div style={{ padding: 20, backgroundColor: 'var(--color-fill-2)' }}>
<Typography.Title heading={4}>Your Submitted Bids</Typography.Title>
<Card style={{ marginTop: 16 }}>
{loading ? (
<Spin />
) : (
<Table
columns={columns}
data={bids}
rowKey="id"
pagination={{
pageSize: 10,
sizeCanChange: true,
showTotal: true,
}}
/>
)}
</Card>
</div>
);
}
export default BidsPage;
|
