diff options
| author | Navan Chauhan <navanchauhan@gmail.com> | 2025-04-27 20:12:33 -0600 | 
|---|---|---|
| committer | Navan Chauhan <navanchauhan@gmail.com> | 2025-04-27 20:12:33 -0600 | 
| commit | 329b94cbab3d6d3dd4cef30bceed251c77032a9e (patch) | |
| tree | 928cfbf52125fbb1cb32a72cd762c4c22a02f7c8 | |
| parent | ba8d8f5cb2ef6a8b42c0952d2ca53da72f69c20d (diff) | |
validate timezones
| -rw-r--r-- | client/src/BidsPage.jsx | 85 | 
1 files changed, 85 insertions, 0 deletions
| diff --git a/client/src/BidsPage.jsx b/client/src/BidsPage.jsx new file mode 100644 index 0000000..c6392b5 --- /dev/null +++ b/client/src/BidsPage.jsx @@ -0,0 +1,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; | 
