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 { ServicesDB } from "../Database/Database";
 6  import { useLiveQuery } from "dexie-react-hooks";
 7  
 8  const ServicesCard = () => {
 9    const allServicesData = useLiveQuery(
10      () => ServicesDB.servicesDetails.toArray(),
11      [],
12    );
13  
14    const filteredServicesData = allServicesData?.filter((servicesData) => 
15      servicesData.client !== undefined &&
16      servicesData.services !== undefined &&
17      servicesData.client !== "" &&
18      servicesData.services !== ""
19    );
20  
21    const lastThreeServicesData = filteredServicesData?.slice(-3);
22  
23    const generateEmptyServicesData = () => {
24      return Array.from(
25        { length: 3 - lastThreeServicesData.length },
26        (_, index) => ({
27          id: `empty_${index}`,
28          client: "-",
29          services: "-",
30        }),
31      );
32    };
33  
34    const filledLastThreeServicesData = lastThreeServicesData?.concat(
35      generateEmptyServicesData(),
36    );
37  
38    return (
39      <Card.Root className={styles.CardRoot}>
40        <div>
41          <h2>
42            <Card.Target href="#" className={styles.CardTarget}>
43              Services
44            </Card.Target>
45          </h2>
46        </div>
47        <div className={styles.content}>
48          <div className={styles.TableRoot}>
49            <Table.Root className={styles.TableRoot}>
50              <Table.Header className={styles.TableHeader}>
51                <Table.Row>
52                  <Table.ColumnHeaderCell className={styles.TableCell}>
53                    Client
54                  </Table.ColumnHeaderCell>
55                  <Table.ColumnHeaderCell className={styles.TableCell}>
56                    Service
57                  </Table.ColumnHeaderCell>
58                </Table.Row>
59              </Table.Header>
60              <Table.Body>
61                {filledLastThreeServicesData?.map((servicesData) => (
62                  <Table.Row key={servicesData.id} className={styles.TableRow}>
63                    <Table.RowHeaderCell className={styles.TableCell}>
64                      {servicesData.client || "-"}
65                    </Table.RowHeaderCell>
66                    <Table.Cell className={styles.TableCell}>
67                      {servicesData.services || "-"}
68                    </Table.Cell>
69                  </Table.Row>
70                ))}
71              </Table.Body>
72            </Table.Root>
73          </div>
74        </div>
75        <div className={styles.learnMore}>
76          <Card.TargetDescription>Open</Card.TargetDescription>
77        </div>
78      </Card.Root>
79    );
80  };
81  
82  export default ServicesCard;