добавь в код сайта <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zapper Dashboard</title>
    <!-- Include Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <!-- Include specific version of Chart.js 3.x -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <!-- Include Moment.js for time parsing -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <!-- Include Chart.js Time Adapter -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
    <!-- Ensure responsive page -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Include external CSS -->
    <link rel="stylesheet" href="styles/style.css">
    <style>
        /* Basic styles for error messages and table */
        .error-message {
            color: red;
            font-weight: bold;
            margin: 20px 0;
        }
        .transactions-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .transactions-table th, .transactions-table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        .transactions-table th {
            background-color: #f4f4f4;
        }
        .pagination a {
            margin: 0 5px;
            text-decoration: none;
            color: #007bff;
        }
        .pagination a.active {
            font-weight: bold;
            text-decoration: underline;
        }
        canvas {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="logo">Zapper</div>
            <nav>
                <ul>
                    <li><a href="index.html"><i class="fas fa-home"></i> Dashboard</a></li>
                    <!-- ... other menu items ... -->
                </ul>
            </nav>
            <div class="logout"><i class="fas fa-sign-out-alt"></i> Logout</div>
        </aside>
        <!-- Main content -->
        <main class="main-content">
            <!-- ... header and other sections ... -->
            <!-- 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 -->
            <!-- ... -->
        </main>
    </div>

    <!-- Include your main.js at the end of the body -->
    <script src="js/main.js"></script>
</body>
</html>
код
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transactions</title>
    <!-- Подключаем Font Awesome для иконок -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <!-- Обеспечиваем адаптивность страницы -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Подключаем внешний CSS -->
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <!-- Структура Dashboard -->
    <div class="dashboard">
        <!-- Боковое меню -->
        <aside class="sidebar">
            <div class="logo">Zapper</div>
            <nav>
                <ul>
                    <li><a href="index.html"><i class="fas fa-home"></i> Dashboard</a></li>
                    <li><a href="portfolio-performance.html"><i class="fas fa-chart-line"></i> Portfolio Performance</a></li>
                    <li><a href="transactions.html" class="active"><i class="fas fa-wallet"></i> Transactions</a></li>
                    <li><a href="upload.html"><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 class="main-content">
            <h3>Transactions</h3>
            <!-- Контейнер для сообщений об ошибках -->
            <div id="error-container" style="display:none; padding: 20px; background-color: #f8d7da; color: #721c24; margin-bottom: 20px; border: 1px solid #f5c6cb; border-radius: 4px;">
                <strong>Error:</strong> <span id="error-message"></span>
            </div>
            <div id="transactionsList" class="transaction-list"></div>
            <div id="pagination" class="pagination"></div>
        </main>
    </div>

    <!-- Подключаем внешний JavaScript -->
    <script src="js/transactions.js"></script>
</body>
</html>
// main.js

document.addEventListener('DOMContentLoaded', function () {
    loadTransactions();
    loadPortfolioChart();
    loadWeeklyChart();
});

// Function to load transactions
function loadTransactions(page = 1) {
    const limit = 15; // Number of transactions per page

    // Corrected path to getTransactions.php
    fetch(`scripts/getTransactions.php?page=${page}&limit=${limit}`)
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                const transactions = result.data;
                const totalPages = result.totalPages;

                displayTransactions(transactions);
                setupPagination(totalPages, page);
            } else {
                throw new Error(result.error || 'Unknown error');
            }
        })
        .catch(error => {
            console.error('Error fetching transactions data:', error);
            displayTransactionError(error.message);
        });
}

// Function to display transactions on the page
function displayTransactions(transactions) {
    const transactionsList = document.getElementById('transactionsList');
    // Clear previous content
    transactionsList.innerHTML = '';

    // Check if there are transactions
    if (!transactions || transactions.length === 0) {
        transactionsList.innerHTML = '<p>No transactions found.</p>';
        return;
    }

    // Create a table to display transactions
    const table = document.createElement('table');
    table.classList.add('transactions-table');

    // Create table header
    const headerRow = document.createElement('tr');
    const headers = ['User', 'Amount', 'Date'];

    headers.forEach(headerText => {
        const th = document.createElement('th');
        th.textContent = headerText;
        headerRow.appendChild(th);
    });

    table.appendChild(headerRow);

    // Add transactions to the table
    transactions.forEach(transaction => {
        const row = document.createElement('tr');

        const userCell = document.createElement('td');
        userCell.textContent = transaction.user;
        row.appendChild(userCell);

        const amountCell = document.createElement('td');
        amountCell.textContent = transaction.amount;
        row.appendChild(amountCell);

        const dateCell = document.createElement('td');
        dateCell.textContent = transaction.date;
        row.appendChild(dateCell);

        table.appendChild(row);
    });

    transactionsList.appendChild(table);
}

// Function to set up pagination
function setupPagination(totalPages, currentPage) {
    const pagination = document.getElementById('pagination');
    pagination.innerHTML = '';

    // Create pagination controls
    for (let page = 1; page <= totalPages; page++) {
        const pageLink = document.createElement('a');
        pageLink.textContent = page;
        pageLink.href = '#';

        if (page === currentPage) {
            pageLink.classList.add('active');
        }

        pageLink.addEventListener('click', function (e) {
            e.preventDefault();
            loadTransactions(page);
        });

        pagination.appendChild(pageLink);
    }
}

// Function to display transaction error
function displayTransactionError(message) {
    const transactionsList = document.getElementById('transactionsList');
    transactionsList.innerHTML = `<p class="error-message">Error loading transactions data: ${message}</p>`;
}

// Function to load the portfolio chart
function loadPortfolioChart() {
    fetch('scripts/getPortfolioData.php')
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                const dataArray = result.data;

                // Extract labels and values
                const labels = dataArray.map(item => item.date);
                const values = dataArray.map(item => parseFloat(item.value));

                const data = { labels: labels, values: values };
                renderPortfolioChart(data);
            } else {
                throw new Error(result.error || 'Unknown error');
            }
        })
        .catch(error => {
            console.error('Error fetching portfolio data:', error);
            displayChartError('portfolioChart', error.message);
        });
}

// Function to render the portfolio chart
function renderPortfolioChart(data) {
    const ctx = document.getElementById('portfolioChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.labels, // Dates on the X-axis
            datasets: [{
                label: 'Portfolio Value',
                data: data.values, // Corresponding values
                borderColor: '#007bff',
                fill: false
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: { // Updated for Chart.js 3.x
                    type: 'time',
                    time: {
                        parser: 'YYYY-MM-DD',
                        unit: 'day',
                        displayFormats: {
                            day: 'MMM D'
                        },
                        tooltipFormat: 'll',
                    },
                    title: {
                        display: true,
                        text: 'Date'
                    }
                },
                y: {
                    beginAtZero: false,
                    title: {
                        display: true,
                        text: 'Value'
                    }
                }
            }
        }
    });
}

// Function to load the weekly performance chart
function loadWeeklyChart() {
    fetch('scripts/getWeeklyData.php')
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                const dataArray = result.data;

                // Extract labels and values
                const labels = dataArray.map(item => item.week_start_date);
                const values = dataArray.map(item => parseFloat(item.performance));

                const data = { labels: labels, values: values };
                renderWeeklyChart(data);
            } else {
                throw new Error(result.error || 'Unknown error');
            }
        })
        .catch(error => {
            console.error('Error fetching weekly data:', error);
            displayChartError('weeklyChart', error.message);
        });
}

// Function to render the weekly performance chart
function renderWeeklyChart(data) {
    const ctx = document.getElementById('weeklyChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: data.labels,
            datasets: [{
                label: 'Weekly Performance',
                data: data.values,
                backgroundColor: '#28a745'
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: { // Updated for Chart.js 3.x
                    type: 'time',
                    time: {
                        parser: 'YYYY-MM-DD',
                        unit: 'week',
                        displayFormats: {
                            week: 'MMM D'
                        },
                        tooltipFormat: 'll',
                    },
                    title: {
                        display: true,
                        text: 'Week Start Date'
                    }
                },
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Performance'
                    }
                }
            }
        }
    });
}

// Function to display chart error
function displayChartError(chartId, message) {
    const chartCanvas = document.getElementById(chartId);
    const chartContainer = chartCanvas.parentElement;
    // Remove the canvas to prevent empty space
    chartCanvas.remove();

    const errorMessage = document.createElement('p');
    errorMessage.classList.add('error-message');
    errorMessage.textContent = `Error loading chart data: ${message}`;
    chartContainer.appendChild(errorMessage);
}