<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zapper Dashboard</title>
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <!-- Chart.js version 2.9.4 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
    <!-- Importing Google Font -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <!-- Ensure responsive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Included CSS directly -->
    <style>
        /* Importing Google Font 'Inter' */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

        :root {
            --primary-color: #7c5cfc;
            --secondary-color: #4CAF50;
            --background-color: #f5f6fa;
            --sidebar-width: 260px;
            --transition-speed: 0.3s;
            --font-family: 'Inter', sans-serif;
        }

        body {
            font-family: var(--font-family);
            margin: 0;
            padding: 0;
            background-color: var(--background-color);
            color: #333;
        }

        /* Dashboard Layout */
        .dashboard {
            display: flex;
            min-height: 100vh;
        }

        /* Sidebar Styling */
        .sidebar {
            width: var(--sidebar-width);
            background-color: #fff;
            border-right: 1px solid #eee;
            display: flex;
            flex-direction: column;
            padding: 20px;
        }

        .logo {
            color: var(--primary-color);
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 40px;
        }

        .sidebar nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar nav ul li {
            margin-bottom: 25px;
        }

        .sidebar nav ul li a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            font-size: 16px;
            display: flex;
            align-items: center;
            transition: color var(--transition-speed);
        }

        .sidebar nav ul li a i {
            margin-right: 15px;
            font-size: 18px;
            color: var(--primary-color);
        }

        .sidebar nav ul li a:hover {
            color: var(--primary-color);
        }

        .logout {
            margin-top: auto;
            padding: 15px 0;
            color: #f44336;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-weight: 600;
        }

        .logout i {
            margin-right: 10px;
            font-size: 18px;
        }

        /* Main Content Styling */
        .main-content {
            flex-grow: 1;
            padding: 30px;
            background-color: var(--background-color);
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .search-bar {
            flex-grow: 1;
            margin-right: 20px;
            position: relative;
        }

        .search-bar input {
            width: 100%;
            padding: 12px 20px;
            border: 1px solid #ddd;
            border-radius: 50px;
            font-size: 16px;
            padding-left: 45px;
            background-color: #fff;
        }

        .search-bar::before {
            content: "\f002";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #aaa;
            font-size: 18px;
        }

        .header-right {
            display: flex;
            align-items: center;
        }

        .currency-selector, .user-profile {
            margin-left: 20px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .currency-selector img, .user-profile img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .currency-selector {
            font-weight: 600;
            color: #555;
        }

        /* Chart Container Styling */
        .chart-container {
            background-color: #fff;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            position: relative;
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .chart-header h3 {
            font-size: 22px;
            font-weight: 600;
            color: #333;
        }

        .chart-header select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            color: #333;
            background-color: #fff;
            cursor: pointer;
            transition: border var(--transition-speed);
        }

        .chart-header select:hover {
            border-color: var(--primary-color);
        }

        .chart-container canvas {
            max-height: 400px;
        }

        /* Transactions Section */
        .transactions {
            background-color: #fff;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .transactions h3 {
            font-size: 22px;
            font-weight: 600;
            color: #333;
            margin-bottom: 25px;
        }

        .transaction-list {
            width: 100%;
            border-collapse: collapse;
        }

        .transaction-list table {
            width: 100%;
            border-collapse: collapse;
        }

        .transaction-list th, .transaction-list td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
            font-size: 16px;
        }

        .transaction-list th {
            background-color: #f8f8f8;
            font-weight: 600;
        }

        .transaction-list tr:nth-child(even) {
            background-color: #fafafa;
        }

        .transaction-list .transaction-icon {
            margin-right: 10px;
            font-size: 20px;
            color: var(--primary-color);
        }

        .transaction-list .status {
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 12px;
            text-align: center;
            color: #fff;
        }

        .transaction-list .status.completed {
            background-color: #4caf50;
        }

        .transaction-list .status.pending {
            background-color: #ff9800;
        }

        .transaction-list .status.failed {
            background-color: #f44336;
        }

        /* Pagination Styling */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .pagination .page-link {
            background-color: #fff;
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
            border-radius: 6px;
            padding: 10px 15px;
            margin: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color var(--transition-speed), color var(--transition-speed);
        }

        .pagination .page-link:hover {
            background-color: var(--primary-color);
            color: #fff;
        }

        .pagination .page-link.active {
            background-color: var(--primary-color);
            color: #fff;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .dashboard {
                flex-direction: column;
            }
            .sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid #eee;
            }
            .main-content {
                padding: 20px;
            }
            .transaction-list th, .transaction-list td {
                font-size: 14px;
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="logo">Zapper</div>
            <nav>
                <ul>
                    <li><a href="#"><i class="fas fa-home"></i> Dashboard</a></li>
                    <li><a href="#"><i class="fas fa-chart-line"></i> Portfolio Performance</a></li>
                    <li><a href="#"><i class="fas fa-wallet"></i> Transactions</a></li>
                    <li><a href="#"><i class="fas fa-upload"></i> Upload</a></li>
                    <li><a href="#"><i class="fas fa-seedling"></i> Farm</a></li>
                    <li><a href="#"><i class="fas fa-exchange-alt"></i> Bridge</a></li>
                    <li><a href="#"><i class="fas fa-history"></i> History</a></li>
                    <li><a href="#"><i class="fas fa-cogs"></i> Settings</a></li>
                </ul>
            </nav>
            <div class="logout"><i class="fas fa-sign-out-alt"></i> Logout</div>
        </aside>
        <!-- Main Content -->
        <main class="main-content">
            <header class="header">
                <div class="search-bar">
                    <input type="text" placeholder="Search token, wallet">
                </div>
                <div class="header-right">
                    <div class="currency-selector">
                        <!-- Replace 'usd.png' with your actual image -->
                        <img src="images/usd.png" alt="USD"> USD
                    </div>
                    <div class="user-profile">
                        <!-- Replace 'user-avatar.png' with your actual image -->
                        <img src="images/user-avatar.png" alt="User">
                    </div>
                </div>
            </header>
            <!-- Portfolio Performance Chart -->
            <section class="chart-container">
                <div class="chart-header">
                    <h3>Portfolio Performance</h3>
                </div>
                <canvas id="portfolioChart"></canvas>
            </section>
            <!-- Weekly Performance Chart -->
            <section class="chart-container">
                <div class="chart-header">
                    <h3>Weekly Performance</h3>
                </div>
                <canvas id="weeklyChart"></canvas>
            </section>
            <!-- Transactions Section -->
            <div class="transactions">
                <h3>Transactions</h3>
                <div id="transactionsList" class="transaction-list"></div>
                <div id="pagination" class="pagination"></div>
            </div>
        </main>
    </div>

    <!-- JavaScript -->
    <script>
        // Declare chart variables
        let portfolioChart = null;
        let weeklyChart = null;

        // Function to log errors
        function logError(error) {
            console.error(error);
            alert('An error occurred: ' + error.message);
        }

        // Load Charts and Transactions
        document.addEventListener('DOMContentLoaded', () => {
            loadPortfolioData();
            loadWeeklyData();
            loadTransactions();
        });

        // Gradient helper function
        function getGradient(ctx, chartArea, colorStart, colorEnd) {
            const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
            gradient.addColorStop(0, colorStart);
            gradient.addColorStop(1, colorEnd);
            return gradient;
        }

        // Load Portfolio Data Function
        async function loadPortfolioData() {
            try {
                const response = await fetch('getPortfolioData.php');
                if (!response.ok) throw new Error('Network response was not ok');
                const data = await response.json();

                if (!Array.isArray(data)) throw new Error('Invalid data format for portfolio data');

                const labels = data.map(item => item.month);
                const values = data.map(item => item.value);

                const ctx = document.getElementById('portfolioChart').getContext('2d');

                // Destroy existing chart instance if it exists
                if (portfolioChart && typeof portfolioChart.destroy === 'function') {
                    portfolioChart.destroy();
                }

                // Create gradient
                const gradientFill = getGradient(ctx, ctx.canvas, 'rgba(124, 92, 252, 0.2)', 'rgba(255, 255, 255, 0)');

                portfolioChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Portfolio Value',
                            data: values,
                            backgroundColor: gradientFill,
                            borderColor: '#7c5cfc',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.4,
                            pointRadius: 0,
                            hoverRadius: 5,
                            pointBackgroundColor: '#7c5cfc',
                            pointHoverBackgroundColor: '#fff',
                            pointHoverBorderColor: '#7c5cfc',
                            pointHoverBorderWidth: 2,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: {
                            duration: 1500,
                            easing: 'easeInOutQuart'
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    fontColor: '#888',
                                    callback: function(value) {
                                        return '$' + value.toLocaleString();
                                    }
                                },
                                gridLines: {
                                    color: '#eee',
                                    zeroLineColor: '#eee'
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    fontColor: '#888'
                                },
                                gridLines: {
                                    display: false
                                }
                            }]
                        },
                        tooltips: {
                            backgroundColor: '#fff',
                            titleFontColor: '#333',
                            bodyFontColor: '#666',
                            xPadding: 10,
                            yPadding: 10,
                            callbacks: {
                                label: function(tooltipItem, data) {
                                    return ' $' + tooltipItem.yLabel.toLocaleString();
                                }
                            }
                        },
                        legend: {
                            display: false
                        }
                    }
                });
            } catch (error) {
                logError(error);
            }
        }

        // Load Weekly Data Function
        async function loadWeeklyData() {
            try {
                const response = await fetch('getWeeklyData.php');
                if (!response.ok) throw new Error('Network response was not ok');
                const data = await response.json();

                if (!Array.isArray(data)) throw new Error('Invalid data format for weekly data');

                const labels = data.map(item => item.day);
                const values = data.map(item => item.value);

                const ctx = document.getElementById('weeklyChart').getContext('2d');

                // Destroy existing chart instance if it exists
                if (weeklyChart && typeof weeklyChart.destroy === 'function') {
                    weeklyChart.destroy();
                }

                weeklyChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Weekly Value',
                            data: values,
                            backgroundColor: '#4caf50',
                            hoverBackgroundColor: '#66bb6a',
                            barThickness: 20,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: {
                            duration: 1500,
                            easing: 'easeInOutQuart'
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    fontColor: '#888',
                                    callback: function(value) {
                                        return '$' + value.toLocaleString();
                                    }
                                },
                                gridLines: {
                                    color: '#eee',
                                    zeroLineColor: '#eee'
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    fontColor: '#888'
                                },
                                gridLines: {
                                    display: false
                                }
                            }]
                        },
                        tooltips: {
                            backgroundColor: '#fff',
                            titleFontColor: '#333',
                            bodyFontColor: '#666',
                            xPadding: 10,
                            yPadding: 10,
                            callbacks: {
                                label: function(tooltipItem, data) {
                                    return ' $' + tooltipItem.yLabel.toLocaleString();
                                }
                            }
                        },
                        legend: {
                            display: false
                        }
                    }
                });
            } catch (error) {
                logError(error);
            }
        }

        // Transactions Section
        let currentPage = 1;
        const transactionsPerPage = 5;

        async function loadTransactions(page = 1) {
            try {
                const response = await fetch(`getTransactions.php?page=${page}&limit=${transactionsPerPage}`);
                if (!response.ok) throw new Error('Failed to fetch transactions');
                const transactions = await response.json();

                if (!transactions.data || !Array.isArray(transactions.data)) {
                    throw new Error('Invalid data format for transactions');
                }

                const transactionsList = document.getElementById('transactionsList');
                transactionsList.innerHTML = ''; // Clear existing transactions

                // Create table structure
                const table = document.createElement('table');

                // Table Header
                const thead = document.createElement('thead');
                const headerRow = document.createElement('tr');
                const headers = ['User', 'Amount', 'Date', 'Status'];
                headers.forEach(headerText => {
                    const th = document.createElement('th');
                    th.textContent = headerText;
                    headerRow.appendChild(th);
                });
                thead.appendChild(headerRow);
                table.appendChild(thead);

                // Table Body
                const tbody = document.createElement('tbody');
                transactions.data.forEach(transaction => {
                    const tr = document.createElement('tr');

                    // User
                    const userTd = document.createElement('td');
                    userTd.innerHTML = `<i class="transaction-icon fas fa-user-circle"></i>${transaction.user}`;
                    tr.appendChild(userTd);

                    // Amount
                    const amountTd = document.createElement('td');
                    amountTd.innerHTML = `<i class="transaction-icon fas fa-dollar-sign"></i> $${Number(transaction.amount).toLocaleString()}`;
                    tr.appendChild(amountTd);

                    // Date
                    const dateTd = document.createElement('td');
                    dateTd.innerHTML = `<i class="transaction-icon fas fa-calendar-alt"></i> ${transaction.date}`;
                    tr.appendChild(dateTd);

                    // Status
                    const statusTd = document.createElement('td');
                    const statusSpan = document.createElement('span');
                    statusSpan.classList.add('status', transaction.status.toLowerCase());
                    statusSpan.textContent = transaction.status;
                    statusTd.appendChild(statusSpan);
                    tr.appendChild(statusTd);

                    tbody.appendChild(tr);
                });
                table.appendChild(tbody);

                transactionsList.appendChild(table);

                setPagination(transactions.totalPages);
            } catch (error) {
                logError(error);
            }
        }

        function setPagination(totalPages) {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = ''; // Clear pagination

            // Previous Button
            if (currentPage > 1) {
                const prevButton = document.createElement('button');
                prevButton.className = 'page-link';
                prevButton.innerText = 'Previous';
                prevButton.onclick = () => {
                    currentPage--;
                    loadTransactions(currentPage);
                };
                pagination.appendChild(prevButton);
            }

            for (let i = 1; i <= totalPages; i++) {
                const pageLink = document.createElement('button');
                pageLink.className = 'page-link';
                if (i === currentPage) {
                    pageLink.classList.add('active');
                }
                pageLink.innerText = i;
                pageLink.onclick = () => {
                    currentPage = i;
                    loadTransactions(currentPage);
                };
                pagination.appendChild(pageLink);
            }

            // Next Button
            if (currentPage < totalPages) {
                const nextButton = document.createElement('button');
                nextButton.className = 'page-link';
                nextButton.innerText = 'Next';
                nextButton.onclick = () => {
                    currentPage++;
                    loadTransactions(currentPage);
                };
                pagination.appendChild(nextButton);
            }
        }

        // Load Transactions on Page Load
        loadTransactions(currentPage);
    </script>
</body>
</html>
при загрузке возникают ошибки
An error occurred: Cannot read properties of undefined (reading 'toLowerCase')
An error occurred: Failed to execute 'createLinearGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite.
Напиши полный текст стриницы исправь ошибки