1  import React from "react";
  2  import * as Card from "@timhettler/radix-card";
  3  import styles from "./transactionrecords.module.scss";
  4  import { Table } from "@radix-ui/themes";
  5  import { AccountRecordsDB } from "../Database/Database";
  6  import { useLiveQuery } from "dexie-react-hooks";
  7  
  8  const TransactionRecords = () => {
  9  
 10    const allAccountRecordsData = useLiveQuery(
 11      ()=> AccountRecordsDB.accountRecordsDetails.toArray(),
 12      [],
 13    );
 14    if(!allAccountRecordsData || allAccountRecordsData.length === 0) {
 15      return (
 16        <Card.Root className={styles.CardRoot}>
 17        <div>
 18          <h2>
 19            <Card.Target href="#" className={styles.CardTarget}>
 20              Transaction Records
 21            </Card.Target>
 22          </h2>
 23        </div>
 24        <div className={styles.content}>
 25          <div className={styles.TableRoot}>
 26            <Table.Root className={styles.TableRoot}>
 27              <Table.Header className={styles.TableHeader}>
 28                <Table.Row>
 29                <Table.ColumnHeaderCell className={styles.TableCell}>
 30                    Account Name
 31                  </Table.ColumnHeaderCell>
 32                  <Table.ColumnHeaderCell className={styles.TableCell}>
 33                    State
 34                  </Table.ColumnHeaderCell>
 35                  <Table.ColumnHeaderCell className={styles.TableCell}>
 36                    Currency
 37                  </Table.ColumnHeaderCell>
 38                  <Table.ColumnHeaderCell className={styles.TableCell}>
 39                    Offer($)
 40                  </Table.ColumnHeaderCell>
 41                  <Table.ColumnHeaderCell className={styles.TableCell}>
 42                    In
 43                  </Table.ColumnHeaderCell>
 44                  <Table.ColumnHeaderCell className={styles.TableCell}>
 45                    Out
 46                  </Table.ColumnHeaderCell>
 47                  <Table.ColumnHeaderCell className={styles.TableCell}>
 48                    DueDate
 49                  </Table.ColumnHeaderCell>
 50                  <Table.ColumnHeaderCell className={styles.TableCell}>
 51                    Balance
 52                  </Table.ColumnHeaderCell>
 53                </Table.Row>
 54              </Table.Header>
 55              <Table.Body>
 56                  <Table.Row className={styles.TableRow}>
 57                    <Table.RowHeaderCell colSpan={6} className={styles.TableCell}>
 58                      No transactions records found
 59                    </Table.RowHeaderCell>
 60                  </Table.Row>
 61              </Table.Body>
 62            </Table.Root>
 63          </div>
 64        </div>
 65      </Card.Root>
 66      )
 67    }
 68  
 69    return (
 70      <Card.Root className={styles.CardRoot}>
 71        <div>
 72          <h2>
 73            <Card.Target href="#" className={styles.CardTarget}>
 74              Transaction Records
 75            </Card.Target>
 76          </h2>
 77        </div>
 78        <div className={styles.content}>
 79          <div className={styles.TableRoot}>
 80            <Table.Root className={styles.TableRoot}>
 81              <Table.Header className={styles.TableHeader}>
 82                <Table.Row>
 83                <Table.ColumnHeaderCell className={styles.TableCell}>
 84                    Account Name
 85                  </Table.ColumnHeaderCell>
 86                  <Table.ColumnHeaderCell className={styles.TableCell}>
 87                    State
 88                  </Table.ColumnHeaderCell>
 89                  <Table.ColumnHeaderCell className={styles.TableCell}>
 90                    Currency
 91                  </Table.ColumnHeaderCell>
 92                  <Table.ColumnHeaderCell className={styles.TableCell}>
 93                    Offer($)
 94                  </Table.ColumnHeaderCell>
 95                  <Table.ColumnHeaderCell className={styles.TableCell}>
 96                    In
 97                  </Table.ColumnHeaderCell>
 98                  <Table.ColumnHeaderCell className={styles.TableCell}>
 99                    Out
100                  </Table.ColumnHeaderCell>
101                  <Table.ColumnHeaderCell className={styles.TableCell}>
102                    DueDate
103                  </Table.ColumnHeaderCell>
104                  <Table.ColumnHeaderCell className={styles.TableCell}>
105                    Balance($)
106                  </Table.ColumnHeaderCell>
107                </Table.Row>
108              </Table.Header>
109              <Table.Body>
110                {allAccountRecordsData.map((accountRecord)=> (
111                  <Table.Row className={styles.TableRow}>
112                  <Table.Cell className={styles.TableCell}>
113                    {accountRecord.accountName}
114                  </Table.Cell>
115                  <Table.Cell className={styles.TableCell}>
116                    {accountRecord.state}
117                  </Table.Cell>
118                  <Table.Cell className={styles.TableCell}>
119                    {accountRecord.currency}
120                  </Table.Cell>
121                  <Table.Cell className={styles.TableCell}>
122                    {accountRecord.offerAmount}
123                  </Table.Cell>
124                  <Table.Cell className={styles.TableCell}>
125                    {accountRecord.receivedAmount}
126                  </Table.Cell>
127                  <Table.Cell className={styles.TableCell}>
128                    {accountRecord.sentAmount}
129                  </Table.Cell>
130                  <Table.Cell className={styles.TableCell}>
131                    {accountRecord.dueDate}
132                  </Table.Cell>
133                  <Table.Cell className={styles.TableCell}>
134                    {accountRecord.usdBalance}
135                  </Table.Cell>
136                </Table.Row>
137                ))} 
138              </Table.Body>
139            </Table.Root>
140          </div>
141        </div>
142      </Card.Root>
143    );
144  };
145  
146  export default TransactionRecords;