1  import React from "react";
 2  import * as Card from "@timhettler/radix-card";
 3  import styles from "./card.module.scss";
 4  import { Table } from "@radix-ui/themes";
 5  import { NotesDB } from "../Database/Database";
 6  import { useLiveQuery } from "dexie-react-hooks";
 7  
 8  const NotesCard = () => {
 9    const allNotesData = useLiveQuery(() => NotesDB.notesDetails.toArray(), []);
10  
11    const filteredNotesData = allNotesData?.filter(
12      (notesData) => 
13      notesData.investor !== undefined &&
14      notesData.amount !== undefined &&
15      notesData.investor !== "" &&
16      notesData.amount !== ""
17    );
18  
19    const lastThreeNotesData = filteredNotesData?.slice(-3);
20  
21    const generateEmptyNotesData = () => {
22      return Array.from(
23        { length: 3 - lastThreeNotesData.length },
24        (_, index) => ({
25          id: `empty_${index}`,
26          investor: "-",
27          amount: "-",
28        }),
29      );
30    };
31  
32    const filledLastThreeNotesData = lastThreeNotesData?.concat(
33      generateEmptyNotesData()
34    );
35  
36    return (
37      <Card.Root className={styles.CardRoot}>
38        <div>
39          <h2>
40            <Card.Target href="#" className={styles.CardTarget}>
41              Notes
42            </Card.Target>
43          </h2>
44        </div>
45        <div className={styles.content}>
46          <div className={styles.TableRoot}>
47            <Table.Root className={styles.TableRoot}>
48              <Table.Header className={styles.TableHeader}>
49                <Table.Row>
50                  <Table.ColumnHeaderCell className={styles.TableCell}>
51                    Investor
52                  </Table.ColumnHeaderCell>
53                  <Table.ColumnHeaderCell className={styles.TableCell}>
54                    Amount
55                  </Table.ColumnHeaderCell>
56                </Table.Row>
57              </Table.Header>
58  
59              <Table.Body>
60                {filledLastThreeNotesData?.map((notesData) => (
61                  <Table.Row key={notesData.id} className={styles.TableRow}>
62                    <Table.RowHeaderCell className={styles.TableCell}>
63                      {notesData.investor || "-"}
64                    </Table.RowHeaderCell>
65                    <Table.Cell className={styles.TableCell}>
66                      {notesData.amount || "-"}
67                    </Table.Cell>
68                  </Table.Row>
69                ))}
70              </Table.Body>
71            </Table.Root>
72          </div>
73        </div>
74        <div className={styles.learnMore}>
75          <Card.TargetDescription>Open</Card.TargetDescription>
76        </div>
77      </Card.Root>
78    );
79  };
80  
81  export default NotesCard;