1  import React, { useState, useEffect } from 'react';
  2  import { LineChart, Line, XAxis, Tooltip, ResponsiveContainer } from 'recharts';
  3  import * as Card from "@timhettler/radix-card";
  4  import styles from "./walletCard.module.scss";
  5  import { useLiveQuery } from "dexie-react-hooks";
  6  import { TransactionDB } from '../Database/Database';
  7  
  8  const WalletCard = () => {
  9    const [chartData, setChartData] = useState([]);
 10    const allTransactionData = useLiveQuery(
 11      () => TransactionDB.transactionDetails.toArray(),
 12      [],
 13    );
 14  
 15    const processTransactionData = (data) => {
 16      const sortedData = data.sort((a, b) => a.timestamp - b.timestamp);
 17  
 18      const groupedByDay = sortedData.reduce((result, item) => {
 19        const date = new Date(item.timestamp);
 20        const day = date.toISOString().split('T')[0];
 21  
 22        if (!result[day]) {
 23          result[day] = [];
 24        }
 25  
 26        result[day].push(item);
 27        return result;
 28      }, {});
 29  
 30      const dailyBalances = Object.keys(groupedByDay).map((day) => {
 31        const transactions = groupedByDay[day];
 32        const latestBalance = transactions[transactions.length - 1]?.balance || 0;
 33        return { day, balance: latestBalance };
 34      });
 35  
 36      return dailyBalances;
 37    };
 38  
 39    useEffect(() => {
 40      if (allTransactionData) {
 41        const dailyBalances = processTransactionData(allTransactionData);
 42        setChartData(dailyBalances);
 43      }
 44    }, [allTransactionData]);
 45  
 46    if (!allTransactionData || allTransactionData.length === 0) {
 47      const generateDummyData = () => {
 48        const today = new Date();
 49        const sevenDaysAgo = new Date();
 50        sevenDaysAgo.setDate(today.getDate() - 7);
 51  
 52        const dummyData = [];
 53        let currentDate = sevenDaysAgo;
 54  
 55        while (currentDate <= today) {
 56          const formattedDate = currentDate.toISOString().split('T')[0];
 57          const balance = Math.random() * 1000;
 58          dummyData.push({ day: formattedDate, balance: balance.toFixed(2) });
 59  
 60          currentDate.setDate(currentDate.getDate() + 1);
 61        }
 62  
 63        return dummyData;
 64      };
 65  
 66      const emptyWalletData = generateDummyData();
 67  
 68      return (
 69        <Card.Root className={styles.CardRoot}>
 70          <div>
 71            <h2>
 72              <Card.Target href="#" className={styles.CardTarget}>
 73                Wallet
 74              </Card.Target>
 75            </h2>
 76          </div>
 77          <ResponsiveContainer width="100%" height="55%">
 78            <LineChart width={100} height={100} data={emptyWalletData}>
 79              <XAxis 
 80                dataKey="day" 
 81                tick={{ fontSize: 7 }} 
 82                tickFormatter={(tick) => {
 83                  const [year, month, day] = tick.split('-');
 84                  return `${day}/${month}`;
 85                }}
 86              />
 87              <Line
 88                isAnimationActive={true}
 89                type="monotone"
 90                dataKey="balance"
 91                stroke="#012060"
 92                strokeWidth={1.5}
 93                dot={{ stroke: '#012060', strokeWidth: 1, r: 2 }}
 94                activeDot={{ stroke: '#012060', strokeWidth: 2, r: 6 }} 
 95              />
 96              <Tooltip formatter={(balance) => `${balance} USD`} 
 97                contentStyle={{ fontSize: '10px', padding: '5px' }}
 98              />
 99            </LineChart>
100          </ResponsiveContainer>
101          <div className={styles.learnMore}>
102            <Card.TargetDescription>Open</Card.TargetDescription>
103          </div>
104        </Card.Root>
105      );
106    }
107  
108    return (
109      <Card.Root className={styles.CardRoot}>
110        <div>
111          <h2>
112            <Card.Target href="#" className={styles.CardTarget}>
113              Wallet
114            </Card.Target>
115          </h2>
116        </div>
117        <ResponsiveContainer width="100%" height="55%">
118          <LineChart width={100} height={100} data={chartData}>
119            <XAxis dataKey="day" tick={{ fontSize: 7 }} />
120            <Line
121              isAnimationActive={true}
122              type="monotone"
123              dataKey="balance"
124              stroke="#012060"
125              strokeWidth={1.5}
126              dot={{ stroke: '#012060', strokeWidth: 1, r: 2 }}
127              activeDot={{ stroke: '#012060', strokeWidth: 2, r: 6 }} 
128            />
129            <Tooltip formatter={(balance) => `${balance} USD`} 
130              contentStyle={{ fontSize: '10px', padding: '5px' }}
131            />
132          </LineChart>
133        </ResponsiveContainer>
134        <div className={styles.learnMore}>
135          <Card.TargetDescription>Open</Card.TargetDescription>
136        </div>
137      </Card.Root>
138    );
139  };
140  
141  export default WalletCard;