From d418dd77f23ab24e91dfebad94832f9496eb567d Mon Sep 17 00:00:00 2001
From: Navan Chauhan <navanchauhan@gmail.com>
Date: Mon, 28 Apr 2025 00:20:28 -0600
Subject: prettifier

---
 client/src/components/BidsPage.jsx | 134 +++++++++++++++++++++++--------------
 1 file changed, 82 insertions(+), 52 deletions(-)

(limited to 'client/src/components/BidsPage.jsx')

diff --git a/client/src/components/BidsPage.jsx b/client/src/components/BidsPage.jsx
index 2b97e99..3e596f0 100644
--- a/client/src/components/BidsPage.jsx
+++ b/client/src/components/BidsPage.jsx
@@ -1,56 +1,75 @@
-import React, { useEffect, useState } from 'react';
-import { Table, Typography, Spin, Message, Card, Empty, Badge } from '@arco-design/web-react';
-import { IconArrowRise, IconArrowFall } from '@arco-design/web-react/icon';
-import '@arco-design/web-react/dist/css/arco.css';
-import API_BASE_URL from '../config';
+import React, { useEffect, useState } from "react";
+import {
+  Table,
+  Typography,
+  Spin,
+  Message,
+  Card,
+  Empty,
+  Badge,
+} from "@arco-design/web-react";
+import { IconArrowRise, IconArrowFall } from "@arco-design/web-react/icon";
+import "@arco-design/web-react/dist/css/arco.css";
+import API_BASE_URL from "../config";
 
 const columns = (bids) => [
   {
-    title: 'Timestamp',
-    dataIndex: 'timestamp',
+    title: "Timestamp",
+    dataIndex: "timestamp",
     sorter: (a, b) => new Date(a.timestamp) - new Date(b.timestamp),
     render: (val) => new Date(val).toLocaleString(),
     width: 180,
   },
   {
-    title: 'Quantity (MW)',
-    dataIndex: 'quantity',
+    title: "Quantity (MW)",
+    dataIndex: "quantity",
     sorter: (a, b) => a.quantity - b.quantity,
     render: (val) => val.toFixed(2),
     width: 180,
   },
   {
-    title: 'Price ($/MWh)',
-    dataIndex: 'price',
+    title: "Price ($/MWh)",
+    dataIndex: "price",
     sorter: (a, b) => a.price - b.price,
     render: (val) => `$${val.toFixed(2)}`,
     width: 180,
   },
   {
-    title: 'Status',
-    dataIndex: 'status',
+    title: "Status",
+    dataIndex: "status",
     sorter: (a, b) => a.status.localeCompare(b.status),
     filters: [
-      { text: 'Submitted', value: 'Submitted' },
-      { text: 'Success', value: 'Success' },
-      { text: 'Fail', value: 'Fail' },
+      { text: "Submitted", value: "Submitted" },
+      { text: "Success", value: "Success" },
+      { text: "Fail", value: "Fail" },
     ],
     onFilter: (value, record) => record.status === value,
     render: (val) => (
-      <Badge status={val === 'Success' ? 'success' : val === 'Fail' ? 'error' : 'processing'} text={val} />
+      <Badge
+        status={
+          val === "Success"
+            ? "success"
+            : val === "Fail"
+              ? "error"
+              : "processing"
+        }
+        text={val}
+      />
     ),
     width: 180,
   },
   {
-    title: 'PnL',
-    dataIndex: 'pnl',
+    title: "PnL",
+    dataIndex: "pnl",
     sorter: (a, b) => (a.pnl || 0) - (b.pnl || 0),
     render: (val) => {
-      if (val === null) return 'N/A';
+      if (val === null) return "N/A";
       const isProfit = val >= 0;
-      const color = isProfit ? 'green' : 'red';
+      const color = isProfit ? "green" : "red";
       return (
-        <Typography.Text style={{ color, display: 'flex', alignItems: 'center', gap: 4 }}>
+        <Typography.Text
+          style={{ color, display: "flex", alignItems: "center", gap: 4 }}
+        >
           {isProfit ? <IconArrowRise /> : <IconArrowFall />}
           {val.toFixed(2)}
         </Typography.Text>
@@ -59,13 +78,13 @@ const columns = (bids) => [
     width: 180,
   },
   {
-    title: 'Market',
-    dataIndex: 'market',
+    title: "Market",
+    dataIndex: "market",
     sorter: (a, b) => a.market.localeCompare(b.market),
     filters: [
-      { text: 'ISONE', value: 'ISONE' },
-      { text: 'NYISO', value: 'NYISO' },
-      { text: 'MISO', value: 'MISO' },
+      { text: "ISONE", value: "ISONE" },
+      { text: "NYISO", value: "NYISO" },
+      { text: "MISO", value: "MISO" },
     ],
     onFilter: (value, record) => record.market === value,
     render: (val) => val,
@@ -80,20 +99,30 @@ function BidsPage() {
   useEffect(() => {
     fetch(`${API_BASE_URL}/bids/`)
       .then((res) => {
-        if (!res.ok) throw new Error('Failed to fetch bids');
+        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.');
+        Message.error("Failed to load bids.");
       })
       .finally(() => setLoading(false));
   }, []);
 
   return (
-    <div style={{ padding: 20, backgroundColor: 'var(--color-fill-2)', minHeight: 'calc(100vh - 150px)', animation: 'fadeSlideIn 0.6s ease' }}>
-      <Typography.Title heading={3} style={{ textAlign: 'center', marginBottom: 20 }}>
+    <div
+      style={{
+        padding: 20,
+        backgroundColor: "var(--color-fill-2)",
+        minHeight: "calc(100vh - 150px)",
+        animation: "fadeSlideIn 0.6s ease",
+      }}
+    >
+      <Typography.Title
+        heading={3}
+        style={{ textAlign: "center", marginBottom: 20 }}
+      >
         Your Submitted Bids
       </Typography.Title>
 
@@ -101,37 +130,38 @@ function BidsPage() {
         style={{
           marginTop: 16,
           borderRadius: 16,
-          boxShadow: '0 8px 24px rgba(0,0,0,0.08)',
-          background: 'linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(245,245,245,0.95) 100%)',
-          backdropFilter: 'blur(8px)',
-          overflow: 'hidden',
-          padding: 20
+          boxShadow: "0 8px 24px rgba(0,0,0,0.08)",
+          background:
+            "linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(245,245,245,0.95) 100%)",
+          backdropFilter: "blur(8px)",
+          overflow: "hidden",
+          padding: 20,
         }}
       >
         {loading ? (
-          <div style={{ textAlign: 'center', padding: 80 }}>
+          <div style={{ textAlign: "center", padding: 80 }}>
             <Spin />
           </div>
         ) : bids.length === 0 ? (
-          <div style={{ textAlign: 'center', padding: 80 }}>
+          <div style={{ textAlign: "center", padding: 80 }}>
             <Empty description="No bids found yet." />
           </div>
         ) : (
           <div className="responsive-table-wrapper">
-          <Table
-            columns={columns(bids)}
-            data={bids}
-            rowKey="id"
-            pagination={{
-              pageSize: 50,
-              sizeCanChange: true,
-              showTotal: true,
-            }}
-            scroll={{ x: true }}
-            border
-            style={{ transition: 'opacity 0.5s ease-in-out' }}
-            rowClassName={() => 'table-row-hover'}
-          />
+            <Table
+              columns={columns(bids)}
+              data={bids}
+              rowKey="id"
+              pagination={{
+                pageSize: 50,
+                sizeCanChange: true,
+                showTotal: true,
+              }}
+              scroll={{ x: true }}
+              border
+              style={{ transition: "opacity 0.5s ease-in-out" }}
+              rowClassName={() => "table-row-hover"}
+            />
           </div>
         )}
       </Card>
-- 
cgit v1.2.3